Configure Tailwind CSS v4 with Vite and the @theme directive.
npx skills add https://github.com/sinhong2011/minikyu --skill tailwind-v4-sinhong2011
Please help me install this Agent Skill. Skill: tailwind-v4 Source: https://github.com/sinhong2011/minikyu/tree/main/.agents/skills/tailwind-v4 Command: npx skills add https://github.com/sinhong2011/minikyu --skill tailwind-v4-sinhong2011
This Skill helps developers configure and utilize Tailwind CSS v4, a modern CSS framework that emphasizes a CSS-first configuration approach, OKLCH color spaces, and efficient build processes.
@tailwindcss/vite plugin.@theme directive for defining colors, fonts, spacing, and animations with OKLCH.Configure Tailwind v4 in your Vite project by adding the @tailwindcss/vite plugin to your vite.config.ts file.
High-intent search queries and answers about installing and using this skill.
To set up Tailwind CSS v4 with Vite, you configure the framework by adding the `@tailwindcss/vite` plugin directly to your `vite.config.ts` file. This integration enables efficient build processes for modern web development projects.
The `@theme` directive in Tailwind v4 is used for defining theming and design tokens. It allows you to configure colors, fonts, spacing, and animations directly within your CSS, utilizing the OKLCH color space for modern styling.
Dark mode in Tailwind CSS v4 works through media query, class-based, or attribute-based strategies. You can implement user-selectable dark modes by leveraging these distinct approaches alongside CSS variable conventions.
Yes, you can use OKLCH colors when configuring Tailwind v4 themes. The framework emphasizes a CSS-first configuration approach that specifically incorporates the OKLCH color system for defining custom color palettes and design tokens.
Tailwind v4 does not require a traditional JavaScript configuration file, as it emphasizes a CSS-first configuration approach. You define your theming, design tokens, and conventions directly inside your CSS using the `@theme` directive.
agusmdevConfigure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.
kyamsSRLBuild Tailwind CSS v4 design systems with @theme tokens and CVA variants.
djankiesConfigure Tailwind CSS v4 with CSS-first @import and @theme directives.
neverinfamousConfigure Tailwind CSS v4 themes using @theme tokens and class-based dark mode.