Adding Styles

One of the things that people find annoying about the way Tailwind CSS works is that for some items, you end up adding a crazy amount of classes. Let's talk about how to create your own custom classes.

Adding Source CSS

• src/styles.css
• tailwindcss -i ./src/styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

To customize Tailwind, you can also add a CSS file as an input and really control how the CSS is generated. Tailwind has three main layers.

Base is a series of styles that all talwind styles needs. It has a reset and other styles to modify how an HTML looks by default. If you were going to override something like a headline you'd modify things in the base.

Components has the CSS needed to build different components. That's a good place to add styles for custom components you'll want to generate.

Utilities has the styles it needs to output certain utilities, so that's a good place to customize things like hover and focus variants.

Layer and Apply

• @layer
• @apply

There are two commands you can use to create the custom classes. The first is @layer, which is used to target one of the three pieces like @base or @components.

Once you target a layer, you can modify a style in that layer using the @apply command.