1. Let's Scan tailwindcss.com

As the creators of TailwindCSS, they could serve as a benchmark for other developers using Tailwind. If we uncover inefficiencies here, it could suggest even greater inefficiencies among less experienced Tailwind users.

Let's scan their source code using Klassco

$ git clone https://github.com/tailwindlabs/tailwindcss.com
$ cd tailwindcss.com

$ klassco -m 7 -t src
 
---
67020 duplicates so far...

This scan only accounted for duplicates of length 7 -m 7, excluding duplicates of lengths 1, 2, 3, 4, and so on.

The result? Sixty seven thousand duplicates and counting. Can you imagine the total if we included those? Half a million? A million? Neither would surprise me.

2. But, I don't use Tailwind

Tailwind is only one example of how repetition is unavoidable. This applies to all the conventions that have emerged, such as CSS in Javascript, SMACSS, OOCSS, BEM, and atomic approaches like Tailwind.

3. Should I be worried?

One might assume that the deliberate repetition of classes in Tailwind is without consequences, and that employing front-end components is the optimal strategy to address this issue. This assumption is not accurate, and we will explore real examples to substantiate this claim.

It's crucial to recognize that duplication, at its essence, signifies an opportunity for enhancement, irrespective of whether it pertains to Tailwind, Vanilla CSS, or a programming language. While components certainly contribute to improvement, there exists a potential for even more refined solutions.

“The function of good software is to make the complex appear to be simple.” — Grady Booch

You may be familiar with v0.dev (opens in a new tab) and similar projects that let you create a UI by simply describing it as a prompt. Although the process requires several iterations to achieve satisfactory results, the vision is promising. However the output code is no different from what you would write yourself.

Now, imagine a different scenario: what if writing code for UI was easier than writing a prompt? What if you could build stunning interfaces with minimal effort and maximum flexibility?

Follow our Quick Start series and by phase 5, you will be amazed by what you can do.

4. How Does Klassco Work?

There are three available modes, each independent of the others. This means that if you're only interested in reducing the bundle size, you can use Klassco solely for that purpose.

1. Dev: It scans all of your HTML files, JavaScript components, and other templates for classname combo duplications to help you reuse styles and create higher abstractions.

2. Watch: It automatically replaces classname combinations with new utilities as you type, using the ones you have created or loaded.

3. Build: It optimizes the build size by removing all duplicate combos.

Klassco uses mathematical combinations to thoroughly explore and analyze every imaginable combination of your CSS classnames, to help you identify subtle patterns, spot redundancies, remove duplicates, and create a carefully curated selection of higher level utilities — designed to save you time and effort.

5. Next Steps

• Quick Start [↗]