Tailwind CSS

Enforces Tailwind CSS conventions and catches common styling mistakes.

Enabled Rules

Rule	Severity	Description
`quality/anti-patterns`	warn	Detects inline styles and CSS-in-JS in Tailwind projects
`quality/file-structure`	warn	Style files in correct locations
`quality/naming-conventions`	block	CSS class naming conventions

import { defineConfig } from '@solanticai/vguard';

export default defineConfig({
  presets: ['tailwind'],
});

No inline styles — Warns when style={{ }} is used in JSX. Use Tailwind utility classes instead.
No CSS-in-JS — Detects styled-components, @emotion, and css template literals. These conflict with Tailwind's utility-first approach.
No redundant CSS files — Warns when component-scoped .css or .module.css files are created alongside Tailwind usage.
Class naming — When custom classes are defined in globals.css, they should follow Tailwind conventions (lowercase, hyphen-separated).