Enforce Tailwind CSS Design Tokens in Vue with @shadcn/lint

Tailwind is awesome. I like having the styling next to the markup. I can read a component and understand its layout without jumping between files. But there’s a huge gap between using Tailwind and automatically verifying that code follows a design system. This becomes especially obvious when AI agents write the UI. An agent can produce valid Tailwind while ignoring the tokens and component variants already in your project. Telling it to follow the design system gives it instructions. It also needs a way to check its work. Take this button: <BaseButton class="bg-red-500">Ship it</BaseButton> bg-red-500 is valid Tailwind. The app builds. But the button has its own variants and theme colors. Someone just painted over them. Tailwind generates CSS for valid utilities. It doesn’t decide whether a caller should change this button’s background. You can enforce conventions with custom lint rules and other tools. That work existed before this package. But the policy doesn’t come from Tailwind…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town