WindClutter

De-cluttering your TailwindCSS.

Wiki · Developer's Guide

Overview

You created awesome project.

It's completed.

Your users are happy.

But now you are left with this question:

All this TailwindCSS clutter...what should I do with it?

You know what I'm talking about. Due to rapid development, we prefer to put Tailwind classes directly into your divs.

As time goes, this clutter grows.

This tool aim to:

Provide analysis of your project
Identify common uses of Tailwind class
Cleanup for large projects

Once your project grows and ready for your users, chances are you are left with humongous task of Tailwind CSS cleanup.

Roadmap progress

Project identification/init
Single file analysis
User own class exclusion (if specified)
Single file de-cluttering
Full project analysis
Full project auto de-clutter

Quick Installation

# requires ruby 2.7 and above
$ gem install windclutter

$ cd your_project
$ windclutter use

In Action

1. Single file analysis `-f`

$ windclutter analysis -f src/index.html

# output

Analysing src/index.html...
Done!
{
                 "flex" => 3,
             "flex-col" => 3,
}

2. Project traversal `-t` (NEW)

Provide an option with your file extension, and let it do its magic! 🎉

$ windclutter analysis -t .html

# output

Analysing .html...
Traversed 22 .html file(s)... 🎉
{
            "flex" => 44,
        "flex-col" => 31,
    "items-center" => 30,
     "text-center" => 21,
           "gap-2" => 14
}
...and 120 more

Bleeding Edge!

This is currently in ideation, but I can't wait to try this even myself.

I have a lot of TailwindCSS project that needs cleanup 🤯

Contributing

Take a look into: https://github.com/Xavier-IV/windclutter/wiki

Great alternative

There are some limited alternative that I'm aware of and are still searching:

Windi CSS Analyzer (Sunsetting)
Tailwind CSS Analysis

windclutter