DEV Community

Rashad Husanli
Rashad Husanli

Posted on

Cleaning Up "Dirty" AI-Generated CSS: Why I Built My Own Autonomous Tailwind Linter

#ai #css #tailwindcss #tooling

Recently, to speed up my frontend workflow, I started relying on AI (LLMs) to generate UI components. The code worked, and it looked fine on the screen. But when I looked at the source code, it was an architectural dump.

The AI kept using hardcoded pixel values like w-[321px] or text-[14px], and randomly hallucinating HEX colors like bg-[#ff0000] that weren't even in my design system.

Normally, the solution is simple: go back to the chat and say, "Fix this to match my Tailwind standards." But doing this for every component meant burning through my AI quota (and my money). My focus should be on getting the logic to work. "Grunt work" like standardizing pixels shouldn't require thinking, and it shouldn't be delegated to an expensive AI prompt. It should be handled by a local, autonomous tool.

Existing linters didn't solve these highly specific UI architectural issues out-of-the-box. So, I built my own zero-dependency autonomous gatekeeper: aura-lint.

How the Autonomous Auto-Fix Engine Works (--fix)

Aura-lint doesn't just find errors and yell at you. When you run it with the --fix flag, it dives into your code and cleans up the mess left by AI (or careless developers).

For example, to solve the recurring pixel (px) issue, I wrote a formula based on Tailwind's default 4-point grid system. When the engine sees a value written in px, it runs this simple but effective math in the background:

const twClass = pxVal / 4;
if (Number.isInteger(twClass)) {
  replacement = `${prefix}-${twClass}`;
} else {
  replacement = `${prefix}-${Math.round(twClass)}`;
}
Enter fullscreen mode Exit fullscreen mode

What does this mean?

  • Did the AI write p-[16px]? Aura-lint divides it by 4, sees it's an integer, and instantly converts it to p-4.
  • Did the AI invent a weird value like w-[18px]? It divides 18 by 4 (4.5), rounds it up, and standardizes it to w-5.

This ensures you never have -[px] spaghetti in your codebase; everything aligns perfectly with standard Tailwind spacing.

You Are in Control: auralint.json

When designing Aura-lint, I wanted the setup and management to be incredibly simple. You can control everything with a single auralint.json file in your project root:

{
  "theme_path": "app.css",
  "hex_to_tailwind_map": {},
  "static_rules": {
    "must_not_have": [],
    "must_have": []
  },
  "plugin_rules": []
}
Enter fullscreen mode Exit fullscreen mode

Thanks to this file, the tool reads your app.css and dynamically learns your theme's CSS variables. You can define your color transformations (hex_to_tailwind_map) and specify classes that must or must not exist in your codebase (static_rules).

Set Your Own Boundaries: The Plugin Architecture

Every project and every team has its own unique standards. That's why I didn't build Aura-lint as a closed black box, but as a fully extensible architecture.

You can write custom rules specific to your project in your plugins folder and inject them into the engine via the plugin_rules array.

In fact, I believe this is the true spirit of open source. If you write an awesome plugin that solves a common UI problem for your team, please send a Pull Request (PR) to our develop branch on GitHub. I would be thrilled to merge great solutions so everyone can benefit from them!

If you want to stop wasting your AI quotas on fixing CSS and start automating your UI architecture, check out Aura-lint on GitHub and drop a star to support the project:
👉 https://github.com/modoldern/aura-lint

Top comments (0)