xavier-iv/windclutter

Quickly develop with TailwindCSS without worries.

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's Issues

Add analysis feature

An analysis to show:

• How many inline class used
• How many duplicates

For analysis, we should identify which one is users class, and which are from tailwind.

Will need a list of full tailwind libraries to compare.

Tool to identify if string is of tailwind class

Currently there are no known ways to identify if a string is of:

• Tailwind
• JIT Tailwind
• User's own class

We might mess up user's codebase if we refactor their own class. Finding a way to analyze if the code is of tailwind or users would bring great benefit to this project.

Attach to project and crawl files

Allow the script to identify project, and afterward attempt to crawl for any class="" attributes.

This will open up a lot of possibilities:

1. Automatically rename the class for initial setup

<div class="border px-4 py-2 rounded-md">
</div>

Will become

<div class="pejqdlxa">
</div>

User can later review and provide useful name during refactoring process.

2. Find close-related classes

class="border px-4 py-2 rounded-md"
class="border px-4 py-2 rounded-sm"
class="border px-4 py-2 rounded-full"

has similarities that can be narrow:

class="lksapw oiqpwe"
class="lksapw ajlkwas"
class="lksapw lakeatg"

Identify user's own class

User can specify where their class resides, e.g.

src/styles/app.css

We will navigate through the file, and mark them as user own class.

This will exclude them from being processed further.

<div class="my-class border rounded-md px-4 py-2">

// To

<div class="my-class skjqer">

It is also possible that the class is inline with the file itself. E.g. those within <style></style>