With Tailwind, you style elements by applying a bunch of pre-written utility classes, minimising the amount of CSS you have to write and maintain. Tailwind doesn’t give you a bunch of styled components like UI libraries such as Bootstrap or Material UI. You must be proficient with CSS — Tailwind is like a CSS power user’s tool, not a crutch.
How do you memorise all the utility classes? You don’t. You pick up on the shorthands like
p-* for margin and padding respectively,
bg-* for background, and so on, and then you let intellisense do the work.
How does Tailwind affect bundle size? Tailwind barely affects bundle size since all the utility classes that are unused are simply tree-shaken. The final CSS file, after build, is usually less than 10kB.
# Utility Classes
Some useful utility classes at a glance. See the full reference.
- Font styles and text color:
items-*, and so on.
- Responsive design:
sm:___where you can apply any utility class after the colon, like
bg-blue-400. The available breakpoints are
sm, md, lg, xl, but they’re customisable
# Custom Utility Classes
You can write your own utility classes if you’re finding the same set of utility classes constantly being applied together. For example:
Tailwind’s utility classes are very unopinionated. To apply broad styling, you can run
npx tailwind init to get a
tailwind.config.js file where you can define some styles that should apply to certain utility classes.
For example, the
container utility class doesn’t center itself by default. You can make that the case by having the following config: