Utilizing CSS Cascade Layers with Tailwind Utilities

Adam Wathan has ingeniously developed Tailwind using CSS Cascade Layers, enhancing its ability to organize styles by priority.

“`css
@layer theme, base, components, utilities;
@import ‘tailwindcss/theme.css’ layer(theme);
@import ‘tailwindcss/utilities.css’ layer(utilities);
“`

The essence of Tailwind lies in its utilities, offering two approaches:

1. The default choice
2. The unorthodox choice

### The default choice

The default approach follows Tailwind’s suggested layer order: components first, utilities last. When building components, wrap them with a `@layer` directive and then use Tailwind to overwrite component styles, making Tailwind the “most important layer”.

“`css
/* Write your components */
@layer components {
.component {
/* Your CSS here */
}
}
“`

This method is effective, but after extensive experimentation, I’ve discovered a preferable solution.

### The Unorthodox Choice

I’m creating a course called Unorthodox Tailwind, exploring the synergistic use of Tailwind and CSS. The Unorthodox Choice involves writing styles in an unnamed layer—after utilities—allowing your CSS to naturally override Tailwind utilities.

Preferred option:

“`css
/* Unnamed layer option */
@layer theme, base, components, utilities;

/* Write your CSS normally here */
.component { /* … */ }
“`

Alternative option:

“`css
/* Named layer option */
@layer theme, base, components, utilities, css;

@layer css {
.component { /* … */ }
}
“`

Reasons for this approach include avoiding unnecessary CSS layers, leveraging ITCSS skills, and handling complex tasks like theming and animations in CSS.

Tailwind utilities are not the “most important” layer; my unnamed CSS layer is. This allows for:

– Quick prototyping with Tailwind.
– Transitioning complex properties to CSS for clarity.

The utility layer in Tailwind can be strengthened with `!important`.

Using `!important` in CSS Layers is valid and useful for quick adjustments.

### Tailwind utilities are more powerful than they seem

Tailwind utilities are not just simple class-to-property mappings. They function like convenient Sass mixins, enabling effective tools for layouts, theming, typography, and more.

Explore these concepts further in Unorthodox Tailwind. Thank you for reading, and I hope this offers a fresh perspective on using Tailwind!