Tailwind

Last updated September 16, 2022.

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 m-* and 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.

Some useful utility classes at a glance. See the full reference.

• max-width: max-w-*
• padding: p-*, px-*, py-*, pl-*, pt-*, pr-*, pb-*
• margin: m-*, mx-*, my-*, ml-*, mt-*, mr-*, mb-*
• background: bg-*
• border: border-*
• Font styles and text color: text-*
• Flexbox: flex-*, justify-*, items-*, and so on.
• Responsive design:
  • container
  • 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

You can write your own utility classes if you’re finding the same set of utility classes constantly being applied together. For example:

1
2
3

.my-btn {
	@apply p-4 font-bold rounded;
}

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

module.exports = {
    purge: [],
    darkMode: false,
    theme: {
        container: {
            center: true,
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
}