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:
unsorted classes
@tailwind base;
@tailwind components;
@tailwind utilities;
classes after sorting
If you made custom classes, they would go first, for example:
My custom classes
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
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:
- Check which files need formatting
npx prettier --check .
- Write to those files or folders:
npx prettier --write [dir name]
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
Top comments (0)