DEV Community

Cover image for Automatically Sorting Tailwind Classes with Prettier
James 'Dante' Midzi
James 'Dante' Midzi

Posted on

6 2

Automatically Sorting Tailwind Classes with Prettier

Ever since TailwindCSS was released there has been a silent battle as to what is the best order for Tailwind's utility classes. I like to believe there is now a definitive answer.

What Is Tailwind?

Tailwind is a utility first CSS framework that aims to get you to use as little CSS as possible.

Up until now, there hasn't been a definitive answer to how to order the classes - which is fitting considering the nature of Tailwind.

Extensions like Headwind have tried to give some rules to this.

Enter Prettier Plugin Tailwind


How Does The Plugin Work?

It uses Prettier's format on save and Tailwind's method of sorting classes. Meaning classes in the base will be first, followed by ones in components, then lastly the ones in utilities:

usorted.png
unsorted classes

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

sorted.png
classes after sorting

If you made custom classes, they would go first, for example:

custom...png
My custom classes

custom.png
How they are sorted after saving


How To Start Using The Plugin

After making sure you have a package.json in your project, simply run:

npm install -D prettier prettier-plugin-tailwindcss
Enter fullscreen mode Exit fullscreen mode

Now any time you save, your classes will be automatically sorted.

Formatting An Existing Project

If you have an existing project that you would like to use the plugin on, simply run the above command then:

  1. Check which files need formatting
npx prettier --check .
Enter fullscreen mode Exit fullscreen mode
  1. Write to those files or folders:
npx prettier --write [dir name]
Enter fullscreen mode Exit fullscreen mode

Conclusion

How do you order your Tailwind classes? Would you consider using the plugin?

image credit: TailiwindCSS


Thank you for reading, let's connect!

Thank you for visiting this little corner of mine. Let's connect on Twitter, Polywork and LinkedIn

Image of Bright Data

Global Data Access Unlocked – Reach data across borders without restrictions.

Unlock the power of global data collection with our advanced proxy solutions. Ideal for market research and more.

Unlock Data Now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay