Tailwind logotype from <a href="https://tailwindcss.com/brand" target="_blank" rel="noreferrer noopener">Tailwind Official Brand page (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/3d-abstract-background-with-paper-cut-flower-shape_18695224.htm" target="_blank" rel="noreferrer noopener"> 3d abstract background with paper cut flower shape (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/garrykillian" target="_blank" rel="noreferrer noopener">GarryKillian (Opens in a new tab)</a> via <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

Tailwind

When I started working with <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a> (mostly known as just Tailwind), I soon realized that there was a need to give a hierarchy to its utilitarian classes. While I had my structure, it seems that peeps at Tailwind have heard this feedback a few times and apparently last year they came up with their <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">automatic class sorting plugin for Prettier (Opens in a new tab)</a>.

What you would have had before as

```html
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
```

will become

```html
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>
```

and that's simply great! You won't have to spend time reorganizing classes, as if you have Prettier set up `onSave` you'll have the classes' sorting right at your fingertips!

## Hierarchy of the sorting

Classes in the `base` layer will be sorted first, followed by classes in the `components` layer, and then finally classes in the `utilities` layer.

From their documentation
<blockquote>
 The actual order of the different utilities is loosely based on the box model, and tries to put high impact classes that affect the layout at the beginning and decorative classes at the end, while also trying to keep related utilities together.

 <div class="text-right">— <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier
 (Opens in a new tab)</a> by <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a></div>
</blockquote>

To understand better how the sorting happens and if you need to keep something in mind, I recommend checking <a href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss" target="_blank" rel="noreferrer noopener">the GitHub page of Tailwind Automatic Class Sorting with Prettier (Opens in a new tab)</a> together with the official page <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier (Opens in a new tab)</a>.

The article shows the names of <a href="https://twitter.com/reinink" target="_blank" rel="noreferrer noopener">Jonathan Reinink (Opens in a new tab)</a> and <a href="https://twitter.com/adamwathan" target="_blank" rel="noreferrer noopener">Adam Wathan (Opens in a new tab)</a>, so thank you peeps!

Custom

Prettier

Tailwind Automatic Class Sorting with Prettier

Chances are you are using VSCode, and chances are you're also using Tailwind in one of your projects. Chances are that at my first *chances are...* you went immediately *nuh-uh* and moved on (and if you're a NeoVim user I can't help you anyway, you're already doomed and lost in the recommended plugins someone chose for you and you're probably still figuring out half of them) but if I got your attention with the first two assumptions, then this post might be relevant for you!

One issue I've been having ever since using Tailwind with SCSS modules has been that VSCode goes absolutely ballistic marking every `@apply` as an unknown CSS rule, __as the editor assumes it's one `at-rule`__ from CSS. (If you are wondering what at-rules are, `@import` and `@media` might sound a bit more familiar :D)

`@apply` is a Tailwind directive that mimics in semantics a native CSS at-rule, and this one in the specific takes care of enabling Tailwind utility classes in a .scss file ... which by now we already now — *I know, we wouldn't be reading this article otherwise* — so jumping to the main thing, let me present you my favourite solution from <a href="https://byby.dev/at-rule-tailwind" target="_blank" rel="noreferrer noopener">the solutions list that this article from byby.dev (Opens in a new tab)</a> proposes.

Open the `.vscode` folder in your project, create a `tailwind_directives.json` file and add the following lines. I took the liberty of expanding from the article, which was talking specifically about the `@tailwind` directive, and take it as a chance to put <a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank" rel="noreferrer noopener">all the Tailwind specific directives I could find from Tailwind's documentation (Opens in a new tab)</a>:

```json
{
 "version": 1.0,
 "atDirectives": [
 {
 "name": "@tailwind",
 "description": "Use the @tailwind directive to insert Tailwind's `base`, `components`, `utilities`, and `screens` styles into your CSS."
 },
 {
 "name": "@apply",
 "description": "Use @apply to inline any existing utility classes into your own custom CSS."
 },
 {
 "name": "@screen",
 "description": "The screen function allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS. Apparently deprecated in favour of @media?!"
 },
 {
 "name": "@layer",
 "description": "Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are base, components, and utilities."
 },
 {
 "name": "@config",
 "description": "Use the @config directive to specify which config file Tailwind should use when compiling that CSS file. Do not put @config before your @import statements."
 }
 ]
}
```

Then, head to `settings.json` and add these two lines:

```json
{
// ... other stuff
 "css.customData": [".vscode/tailwind_fix.json"],
 "scss.customData": [".vscode/tailwind_fix.json"]
}
```

And voilá! Done!

Now now, you might be tempted to follow the first solution proposed by the article, which simply tells VSCode to ignore every at-rule it cannot recognise:

```json
{
// ... other stuff
 "css.lint.unknownAtRules": "ignore"
 "scss.lint.unknownAtRules": "ignore"
}
```

But! __What about typos?__ We all make them, and I wouldn't trust myself writing things correctly any day :'D Better be more specific and let pass only the things we are aware of!

oh-no.ooo

Prettier

Snippets

Tailwind Automatic Class Sorting with Prettier

Unknown at rule @apply... k thx bye!