Tailwind CSS is a utility-first CSS framework that provides many ready-made classes that can be used. I would talk about it only a little, you can learn about Tailwind CSS and its power with the help of their documentation here. Their documentation is excellent👌👌👌.
Since their documentation is excellent you can integrate it into any project using their guides available here. In my case, it is a react app that is created using Vite, and setup instructions are available here. and the sample project is available at this Git Hub link It’s that simple and no point in showing the same setup in here because they might change at the time that you are reading. One thing you might observe is after adding this it will add some default styles to the project. The details about these default styles and extending and disabling details are available here.
The goal of this article is to provide you with two settings that can be used in VS Code to improve your productivity when working with Tailwind CSS.
1. Tailwind CSS IntelliSense Plugin
Simply install this plugin using the VS code plugin manager.
The first benefit you gain with this plugin is automatic completion. Since most class names are self-explaining ones this is very helpful to find the class without going through the documentation.
One important feature to have is it gives you the ability to show the actual CSS code when you hover over the class name in the IDE.
More details are available here.
2. Reformatting using Prettier
Prettier is an opinionated code format that can be used to format your code across the team in the same way. You can learn more about usage and configuration details here.
To use Prettier in VS Code install this plugin first.
Then you can change settings to reformat your file when saving the file.
Also, need to change the default format to Prettier
Now the Prettier will reformat you when you save the file. But this is a global setting, if you need to enable this only for the project, create a folder named .vscode, and inside it add a settings.json file with the below content.
So far nothing specific about Tailwind. When using Tailwind the classes can grow rapidly since we are using tiny classes to build the full style. Prettier can help to some extent to handle this clutter. But still, it is harder to find a way to sort these names in the same way across the teams. Luckily the Tailwind team provides a Prittier plugin that will sort the classes automatically. Follow the instructions here to set up this plugin. After that, you can observe that class names are sorted automatically when you save the file.
Before saving the file
After saving the file
Note: The extension od prettier.config file needs to be .cjs (not .js) in a Vite project.