Youtube Video — https://www.youtube.com/watch?v=jQrixLr_waU
Since I’ve been using TailwindCSS for personal or commercial project, I always have been thinking about ordering classes.
Because it was much easier and faster to navigate through styles for elements and updating was smoother, and I found a solution for it, which also have some other incredibly useful features! So, let’s dive in.
Firstly what you need is set up TailwindCSS and EsLint for your project ( with basic config files ), you probably already did this :)
Then you should install npm package “eslint-plugin-tailwindcss” as a dev dependency writing “npm i — save-dev eslint-plugin-tailwindcss”. This is our plugin for EsLint
Install package command in terminal consone
Secondly You need to connect this plugin to EsLint, so in Eslint 8 or below you need to add the plugin name into an extends array, if you’re using Eslint version 9 or later you need to firsly import the plugin and then register it in plugins array.
Also you should set rule “tailwindcss/no-custom-classname” to “off” if you want to use custom classes in your project ( custom classes are classes that aren’t specified in tailwind config, for example “content-wrapper-header” ).
I use Eslint version 8, on the screenshot below you can also see in comments suggestions for connecting for Eslint 9+
EslintRc configuration file
And that’s it!
Now you should see warnings in classes which has wrong order, and if you run “eslint — fix” every class should be re-ordered. You can specify this action on save in your IDE or CI/CD for your project.
Additional features of this plugin are automatically replacing classes that shouldn’t be used or there is shortcut for them. For example lets create a div with classes “hover:bg-red-700 w-full h-full mt-[1rem] flex”:
After we run eslint fix command ( In my case I saved the file so my IDE will run the command ) We get different result:
Firstly classes was automatically ordered so hover state is the latest and other classes has its order. Secondly instead of “w-full h-full” we see only “size-full” Because it’s the same thing, “size” sets the value for width and height so we can use only one class instead of two. Lastly JIT feature of TailwindCSS for margin was replaced with exsiting class in tailwind config ( it will work for any classes you describe in your Tailwind config )
That’s it Guys, I believe this article was helpful. If you have any questiong feel free to DM in my socials.
Don’t forget to like and follow me if you don’t want to miss other tech related articles.
Article in Video Format on YouTube — https://www.youtube.com/watch?v=jQrixLr_waU
*Social Links - * https://linktr.ee/oleh_nazarovych
Top comments (0)