tailwind-config

This skill enables precise control over the project's styling layer, specifically tailored for Tailwind CSS v4 and the HeroUI-integrated design system. It is designed for frontend developers and engineers maintaining consistent design tokens, spacing scales, and color palettes across the web application. By interacting directly with global CSS variables and tailwind.config files, it ensures that your application's visual language remains scalable, maintainable, and strictly aligned with the core project requirements.

• Updates theme configurations including color palettes, font scales, and animation keyframes to keep the UI in sync with evolving design specifications.

• Manages semantic design tokens mapped to CSS variables for dynamic dark mode support and consistent light mode visuals.

• Defines and extends custom utility classes for specialized UI needs, such as non-standard text wrapping or scrollbar handling.

• Configures Tailwind plugins like @tailwindcss/typography and @tailwindcss/forms to maintain robust styling foundations.

• Enforces strict styling conventions, such as the use of size-* utility classes for fixed-dimension elements instead of standard width and height pairs.

• Integrates with the web application’s globals.css file to centralize CSS custom properties and theme-specific variant overrides.

• Use this skill when adding new brand colors, scaling spacing systems, or configuring custom themes within the Next.js App Router environment.

• Always check for content path consistency in your config when adding new directory structures to ensure proper purging.

• Verify dark mode functionality by ensuring CSS custom variables are correctly defined for both :root and .dark selectors.

• Leverage the provided CLI debugging commands, such as npx tailwindcss config, to validate resolved configurations during development.

• Prioritize the use of mobile-first responsive design patterns as established in the current project codebase.

• Ensure all style definitions support the project's requirement for efficient caching and high-performance frontend delivery.