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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more