Clean Tailwind Classes in One Click

Why Formatting Matters

In modern web development, consistent code formatting is crucial. Tailwind CSS's utility classes can quickly become a tangled mess, making your code:

• Hard to read

• Difficult to maintain

• Challenging for team collaboration

The Solution: Prettier Tailwind CSS Plugin

The Prettier Tailwind CSS plugin automatically sorts and organizes utility classes, bringing instant order to your code with minimal effort.

Quick Setup Guide

1. Install Dependencies

pnpm add -D prettier prettier-plugin-tailwindcss

2. Configure Prettier

Create a .prettierrc configuration:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Now use your format document shortcut 💢

OR

echo '{
  "plugins": ["prettier-plugin-tailwindcss"]
}' > .prettierrc

Alternatively, you can create the file directly via the terminal 😍

Done! You're all set. 🎉

Before Formatting

After Formatting

Quick Formatting: The One-Click Wonder ✨

Instead of formatting a single file manually, format the entire codebase with Prettier using the following script:

In your package.json, add these scripts:

 "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }

Then, run pnpm format

Sit back and enjoy the magic! 🚀

Benefits at a Glance

• 🔍 Automatically sorts tailwind classes

• 🚀 Improves code readability

• 👥 Enhances team collaboration

• ⏱️ Saves time and mental energy

🌟 Thank You for Reading!

If you enjoyed this article or found it helpful, feel free to share it with others!
I'd love to hear your thoughts—connect with me on Github, Peerlist.