DEV Community

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

Posted on

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)