DEV Community

Cover image for I made a Prettier plugin that sorts your Tailwind classes... randomly!
lazy-sock
lazy-sock

Posted on

1 1

I made a Prettier plugin that sorts your Tailwind classes... randomly!

Prettier is a code formatter that many developers rely on to keep their code clean and consistent. But what if you wanted to inject a bit of randomness into your workflow? Enter prettier-plugin-tailwindcss-anarchy—a playful twist on the official Tailwind CSS Prettier plugin. Instead of organizing your Tailwind classes in a structured, recommended order, this plugin shuffles them randomly every time you format your file. It's perfect for developers who enjoy a bit of unpredictability or just want to shake things up! Maybe you could install this on a teammate's machine...

If you're new to Prettier or need a quick refresher, check out this guide by Web Dev Simplified. It walks you through the installation and setup process.

To learn more, check out the website: https://prettier-plugin-tailwindcss-anarchy.netlify.app/

Installation

Install prettier and prettier-plugin-tailwindcss-anarchy:

npm install -D prettier prettier-plugin-tailwindcss-anarchy
Enter fullscreen mode Exit fullscreen mode

Create a file named .prettierrc and add the following code:

{
    "plugins": ["prettier-plugin-tailwindcss-anarchy"]
}
Enter fullscreen mode Exit fullscreen mode

Thats it! Still have problems? Check out the official prettier-plugin-tailwindcss documentation.

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay