tailwind-best-practices

To fix outdated Tailwind v3 syntax generated by AI coding tools, enforce Tailwind v4 best practices that correct issues like outdated opacity modifiers, wrong gradient syntax, and incorrect @tailwind directives.

Migrating to Tailwind v4 CSS-first configuration involves replacing your tailwind.config.js setup with modern @theme directives inside your CSS files to define custom design tokens and utilities.

Your AI assistant generates bg-opacity-50 because it relies on outdated v3 training data, requiring a best-practices enforcement layer to correct it to the v4 standard bg-red-500/50 opacity modifier syntax.

Common Tailwind v4 syntax mistakes include incorrect @import statements, wrong gradient syntax, outdated opacity modifiers, and improper container queries, which require correction to modern utility patterns.

Yes, Tailwind v4 best practices enforcement works without external dependencies, using internal references to guide AI agents away from outdated configuration patterns and towards CSS-first @theme setups.

You need to enforce Tailwind v4 best practices whenever an AI agent generates CSS code, ensuring adherence to modern v4 syntax, configuration, and utility patterns by correcting outdated v3 implementations.