Tailwind CSS Formatter Setup (Prettier + Tailwind v4)

This guide explains how to set up automatic Tailwind class sorting using Prettier.

---

🚀 1. Install Required Packages

Run the following command:

npm install -D prettier prettier-plugin-tailwindcss

---

⚙️ 2. Create Prettier Configuration

Create a file in the root of your project:

.prettierrc

Add the following:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "./src/index.css"
}

⚠️ Update the path if your Tailwind CSS file is located elsewhere.

---

🎨 3. Ensure Tailwind CSS Entry File Exists

Your CSS file (example: src/index.css) must include:

@import "tailwindcss";

---

🧩 4. Configure VS Code

Install Extension:

• Prettier - Code formatter (by esbenp)

---

Update VS Code Settings

Open settings.json and add:

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

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

---

🧪 5. Test the Setup

Before formatting:

<div className="bg-blue-500 p-4 flex items-center justify-between text-white rounded"></div>

After saving:

<div className="flex items-center justify-between rounded bg-blue-500 p-4 text-white"></div>

---

🛠️ 6. Manual Formatting (Optional)

Run Prettier manually:

npx prettier --write .

---

⚠️ Common Issues & Fixes

❌ Classes not sorting

• Ensure Prettier is set as default formatter
• Check .prettierrc is in root directory
• Restart VS Code

---

❌ Not working in JSX

• Ensure [javascriptreact] formatter is set to Prettier

---

❌ Plugin not detected

Run:

npx prettier --log-level debug .

---

❌ Wrong Tailwind path

Make sure:

"tailwindStylesheet": "./src/index.css"

---

📌 Notes

• Tailwind v4 requires tailwindStylesheet configuration
• Sorting works automatically on save
• Supports JSX, TSX, HTML

---

✅ Summary

• Install Prettier + Tailwind plugin
• Configure .prettierrc
• Set Prettier as default formatter
• Enable format on save

---

🎯 You're Done!

Now your Tailwind classes will automatically sort on save, keeping your code clean and consistent.