Automatic Tailwind Class Ordering with Prettier

Are you a Tailwind CSS fan but get annoyed when your class attributes look like your sock drawer exploded?

Don't worry, we've all been there.

Here's a lifesaver: automatically ordering your Tailwind classes using Prettier.

This isn't just about making your code pretty (pun intended); it's about maintaining consistency and readability, especially when working in teams.

Let's dive into how to set this up. It's easier than you think!

1) Install the Necessary Packages

First things first, you need to have Node.js installed on your system. Assuming you've got that covered, open your terminal and navigate to your project directory.

Run the following command to install Prettier and the Tailwind CSS Prettier plugin:

npm install --save-dev prettier prettier-plugin-tailwindcss

This command installs Prettier and the Tailwind CSS plugin for Prettier as development dependencies.

Step 2: Configure Prettier

Create a .prettierrc file in your project root if you don't already have one. This file is where you'll specify your Prettier configurations. You can start with a basic configuration like this:

{
  "semi": false,
  "singleQuote": true
}

This configuration is just an example. Feel free to tweak it according to your preferences. The magic happens because of the Tailwind plugin, so you don't need any special Tailwind-specific settings here.

2) Test It Out

Time to test! Create a messy Tailwind class string in one of your files. Something like this:

<div class="p-4 flex justify-between bg-blue-500 text-white rounded-lg"></div>

Now, run Prettier in your terminal:

npx prettier --write .

This command tells Prettier to process all the files in your project and reformat them. After running this, you should see your Tailwind classes neatly ordered according to Tailwind's recommended order.

And voilà! You now have a setup that keeps your Tailwind classes in order, making your codebase look clean and consistent. Now, this might get a bit cumbersome, and I like it to work auto-magically when I save my code. This is pretty easy in Visual Studio Code:

3) Automatic Fixes with Visual Studio Code Setup

Let's make your life even easier by integrating this setup directly into Visual Studio Code (VS Code).

This way, your Tailwind classes will be automatically ordered whenever you save a file.

Install the Prettier VS Code Extension

Before we jump into the settings, make sure you have the Prettier extension installed in VS Code. You can find it in the Extensions marketplace (just search for "Prettier - Code formatter"). Click 'Install', and you're halfway there. Here's a link, in case you aren't sure which one it is.

Configure VS Code Settings

Once you've got Prettier installed, you'll want to tweak your VS Code settings to make the most of it. You can access the settings by pressing Ctrl + , (or Cmd + , on Mac) or by searching for 'Settings' in the Command Palette (Ctrl + Shift + P or Cmd + Shift + P).

Add the following configurations to your settings.json file in VS Code:

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

These settings will enable format-on-save specifically for HTML files (where you'll mostly use Tailwind classes) and ensure Prettier runs only if a configuration file is in your project.

Enjoy Automatic Formatting

Now, every time you save an HTML file in VS Code, Prettier will automatically kick in and order your Tailwind classes. It's that simple! No more manually reordering classes or dealing with inconsistent formatting. It should fix a little more than your classes, which is a nice bonus!

Remember, coding is not just about functionality; it's also about creating a maintainable codebase. I hope this helps keep your Tailwind from getting too wild!

Happy coding! 🚀🌟