unknown

AI-generated UI components often produce messy Tailwind CSS with hardcoded pixel values and arbitrary HEX colors that don't match design systems. Rather than burning AI quota to fix these issues, the author built aura-lint, a zero-dependency autonomous Tailwind linter. It auto-fixes pixel values by converting them to Tailwind's 4-point grid system (e.g., p-[16px] becomes p-4), maps HEX colors to design system tokens, and supports custom plugin rules via an auralint.json config file. The tool is open source and extensible for team-specific standards.

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

SeyoungCho

The problem - my AI generates a lot of crappy unmaintainable css, oh no! The subsequent requests eat hundrends of dollars worth of tokens! What should I do?
How about you just write your own css by yourself and you don’t have any of these issues?
No, no, what are you talking about? Everyone on social media is using AI and my boss told me he was going to fire me if I don’t use Claude inside Cursor powered by Geminied Codex so I have to do it.
Okay, keep suffering then.

I get the problem and the solution, what i dont get is why eslint does not solve this for you.
I have custom written eslint rules for everything and all i usually have to do to get them is just: “Please write an eslint rule that replaces tailwind pixel values (p-[16px]) with whole numbers (p-4). Include an auto fixer and add it to the eslint config of the project”
Have you tried this? I dont get where exactly eslint fails you for this.