tailwindcss-best-practices
Tailwind CSS v4.x Best Practices
Covers Tailwind CSS v4.0 through v4.2.2 (latest stable as of March 2026). Always check the official docs at https://tailwindcss.com/docs for the latest.
Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS, you compose designs using utility classes directly in your markup. Tailwind v4 introduced CSS-first configuration with @theme variables, @utility for custom utilities, and @custom-variant for custom variants — replacing the old tailwind.config.js approach entirely.
Critical v4 Migration Gotchas
These are the most common mistakes when working with Tailwind v4. If you're migrating from v3 or using v4 for the first time, read the upgrade guide — but here are the top trip-ups:
| v3 (old) | v4 (correct) | Why it changed |
|---|---|---|
!bg-red-500 |
bg-red-500! |
Important modifier moved from prefix to suffix |
bg-opacity-75 |
bg-red-500/75 |
Opacity modifiers removed; use slash syntax on the color |
shadow |
shadow-sm |
Shadow scale shifted down one step |
shadow-sm |
shadow-xs |
Shadow scale shifted down one step |
rounded |
rounded-sm |
Border radius scale shifted down one step |
rounded-sm |
rounded-xs |
Border radius scale shifted down one step |
ring |
ring-3 |
Default ring width changed from 3px to 1px |
More from biggora/claude-plugins-registry
captcha
>
32test-web-ui
>
19vite-best-practices
Vite build tool configuration, plugin API, SSR, library mode, and Vite 8 Rolldown/Oxc migration. Use when working with Vite projects, vite.config.ts, Vite plugins, building libraries or SSR apps with Vite, migrating from older Vite versions, or configuring Rolldown/Oxc options. Also use when the user mentions HMR, import.meta.glob, virtual modules, or Vite environment variables.
14gemini-cli
>
12typescript-expert
TypeScript language expertise covering the type system, generics, utility types, advanced type patterns, and project configuration. Use this skill whenever writing, reviewing, or refactoring TypeScript code, designing type-safe APIs, working with complex generics, debugging type errors, configuring tsconfig.json, migrating JavaScript to TypeScript, or leveraging TypeScript 5.x features like satisfies, const type parameters, decorators, and the using keyword. Also use when the user asks about type narrowing, conditional types, mapped types, template literal types, branded types, discriminated unions, or any TypeScript type system question — even seemingly simple ones, because TypeScript's type system has subtle gotchas that catch experienced developers.
12test-mobile-app
>
11