Member-only story
Nextjs 15
How to Use prettier-plugin-tailwindcss in your Next.js 15 project?
Automatically Sort your Tailwind CSS Classes in Next.js 15 with Prettier Plugin.
4 min readJun 13, 2025
When we work with Tailwind CSS, the biggest problem we face is how to organise our Tailwind CSS classes in our project so we can easily manage them.
First, understand why we need to organise the Tailwind CSS classes in our project:
- ✅ Automatic Class Sorting: Automatically organizes your Tailwind CSS classes in a logical and consistent order.
- 🔧 Adheres to Best Practices: Follows the recommended sequence: base → components → utilities.
- 👀 Improved Readability and Maintainability: Makes class names easier to read and understand, simplifying debugging and future style updates.
- 🛠️ No Manual Effort Required: Integrates with Prettier to automatically format classes — just save your file!
- 🤝 Enhanced Team Collaboration: Ensures a consistent code style among all team members, which reduces confusion.
- 🔄 Fewer Merge Conflicts: Minimizes Git merge issues caused by differently ordered class names.
