tailwindcss-development

Replace the @tailwind base, components, and utilities directives with a single @import "tailwindcss" statement. Move configuration from tailwind.config.js into a CSS-first @theme block, and swap deprecated utilities like bg-opacity-* and flex-shrink-* for their v4 replacements.

Use the grid utility with responsive column classes such as grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6. This renders one column on mobile, two on medium screens, and three on large screens with consistent spacing between items.

Tailwind v4 uses CSS-first configuration through the @theme directive instead of a separate tailwind.config.js file. Custom values like brand colors are declared as CSS variables inside @theme, and corePlugins is no longer supported.

The bg-opacity-* utilities were removed in Tailwind v4. Use the slash opacity syntax instead, such as bg-black/50, which applies opacity directly to the color value. The same replacement pattern applies to text, border, divide, ring, and placeholder opacity utilities.

Apply the dark: variant to utilities, for example bg-white dark:bg-gray-900 text-gray-900 dark:text-white. New pages and components should follow the same dark mode approach already used elsewhere in the project.

Skip it for backend PHP logic, database queries, API routes, JavaScript without an HTML or CSS component, CSS file audits, build tool configuration, and vanilla CSS work. It targets writing utility classes in HTML templates only.