Supercharging VS Code for Tailwind CSS

Heads up, this content is in beta. Use at your own risk!

When working with Tailwind CSS, having the right tools can significantly boost your productivity and coding experience. Two such tools—IntelliSense and Prettier—can supercharge Visual Studio Code (VS Code) for a seamless Tailwind CSS journey.

Here’s a step-by-step guide on how to install and set them up.

Install Tailwind CSS IntelliSense

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing advanced features like autocomplete, syntax highlighting, and linting.

• Open VS Code and navigate to the Extensions view (Ctrl/CMD + Shift + X or View > Extensions).
• In the search bar, type Tailwind CSS IntelliSense and select the extension.
• Click on Install.
• After installation, reload VS Code to activate the extension.

Install the Prettier plugin for Tailwind CSS

Prettier is an opinionated code formatter that can automatically format and sort your Tailwind CSS classes, making your code more readable and standardized.

In your terminal, type the following code:

npm install -D prettier prettier-plugin-tailwindcss

And in your prettier config, you’ll need to add the installed plugin:

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
};

Install Headwind

Headwind, an opinionated class sorter for Tailwind CSS, runs on save, quickly organizing your classes. You’l want to use Headwind if you’re not using Prettier but still want class sorting.

• In the Extensions view (Ctrl/CMD + Shift + X or View > Extensions), search for Headwind.
• Click on Install.
• After installation, reload VS Code.

Configure Headwind

By default, Headwind sorts classes according to Tailwind’s recommended order. If you want to change this, you can modify the settings in the .vscode/settings.json file in your workspace directory.

Here’s a sample configuration:

"headwind.defaultSortOrder": [
  "container",
  "flex",
  "w",
  "text",
  "bg",
  "border",
  "rounded"
]