Is there a best order to write Tailwind CSS utility classes?

[mdtaufiquekhan]

I’m pretty new to Tailwind CSS, and I’m trying to understand not just how to use it, but also how to keep my code clean and readable as I go.

I really like Tailwind’s utility-first approach. The idea is simple: instead of writing separate CSS files, you write all your styles directly in your HTML using Tailwind’s utility classes. I also read that Tailwind’s creator, Adam Wathan, doesn’t recommend overusing @apply, because Tailwind is designed for “writing styles as you go.”

This also means that it’s totally fine to repeat the same classes on some identical elements — it doesn’t follow the traditional Don’t Repeat Yourself (DRY) rule, and that’s by design.

Now, here’s where I’m struggling: when I write a component that is fully styled with Tailwind (including responsive breakpoints and dark mode), I often end up with a lot of classes. For example:

<ul 
  class="
    fixed top-12 right-0
    flex flex-col gap-10
    w-64 h-[calc(100%-3rem)] p-6
    text-white bg-gray-800
    transform translate-x-full transition-transform duration-300
    dark:bg-gray-900 dark:text-gray-100
    xl:static xl:flex-row xl:w-auto xl:h-auto xl:bg-transparent xl:translate-x-0
  "
>

When I’m coding, I don’t really follow a consistent order for these classes. Sometimes I start with typography, sometimes with spacing, sometimes with layout, etc. But when I come back later to make changes, it’s hard to read and find what I need.

I asked an AI tool, and it suggested an order like this:

layout → spacing → sizing → typography → colors → effects

That seems helpful, but I wanted to ask real developers:

Is there any widely accepted or recommended way to order Tailwind classes, or is it just personal style?

Thanks in advance! I’m still learning, so any tips or suggestions would really help me write better Tailwind code.

[GamendeBrian]

You can use a prettier plugin for Tailwind. There was one a few years back which you can find here:
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier.

Or directly:
https://github.com/tailwindlabs/prettier-plugin-tailwindcss

I see it has Tailwind V4 support now.

I'm not sure if you can define your own sorting order though..

Hope this helped a bit.