We are a Melbourne-based nearshore software outsourcing company providing world-class dedicated tech talent and development expertise to companies listed in the Australian Share Market to innovative startups who are shaping the future.

Contacts Us

Melbourne
Suite 37/11, Wilson St,
South Yarra,
VIC 3141.

Colombo
19, Katukurunduwatta Road, Ratmalana,

info@unibench.com.au

Melbourne
1300 320 487

Colombo
+94 769 360 433

Uncategorized

Setup Tailwind CSS in your projects with improved productivity using Visual Studio Code

1va6jiyWpCyF2yCAPzjnlCA Setup Tailwind CSS in your projects with improved productivity using Visual Studio Code

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.

1kuNU4K16AruT4ca_s_xjIg Setup Tailwind CSS in your projects with improved productivity using Visual Studio Code

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.

1nnSEtwy9OWMZKvTv2UK9ug Setup Tailwind CSS in your projects with improved productivity using Visual Studio Code

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.

1Xoo7eRISELj3VHmOg17nXQ Setup Tailwind CSS in your projects with improved productivity using Visual Studio Code

Then you can change settings to reformat your file when saving the file.

1ECaJd0Nw1GM3Gc0vNzX6xw Setup Tailwind CSS in your projects with improved productivity using Visual Studio Code

Also, need to change the default format to Prettier

11DcSOKid_Ou-ygecraFT5g Setup Tailwind CSS in your projects with improved productivity using Visual Studio Code

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.

{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}

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

1nJFXe74-n4J-Bmu8IJygkw Setup Tailwind CSS in your projects with improved productivity using Visual Studio Code

After saving the file

1nJFXe74-n4J-Bmu8IJygkw-1 Setup Tailwind CSS in your projects with improved productivity using Visual Studio Code

Note: The extension od prettier.config file needs to be .cjs (not .js) in a Vite project.

Leave a comment

Your email address will not be published. Required fields are marked *