skills.rest
blockmatic-icebox
blockmatic-iceboxOFFICIAL
Explore all skills by this author →
GitHub

Tailwind v4 + shadcn/ui

Convert Tailwind v4 design tokens into a CSS-variable theming system for React apps.

4|1|Updated Aug 15, 2024
Search Tags:#theming#react#shadcn/ui#tailwind#dark-mode#css-variables
One-click install
npx skills add https://github.com/blockmatic-icebox/basilic-old --skill tailwind-v4-shadcn-ui-blockmatic-icebox
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Tailwind v4 + shadcn/ui
Source: https://github.com/blockmatic-icebox/basilic-old/tree/main/.cursor/skills/shadcn-v3
Command: npx skills add https://github.com/blockmatic-icebox/basilic-old --skill tailwind-v4-shadcn-ui-blockmatic-icebox

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind v4 + shadcn/ui theming with a CSS-variable architecture enables consistent theming, dark mode support, and scalable component composition across React apps.

Core Features & Use Cases

  • Maps CSS variables to Tailwind utilities via @theme inline, enabling dynamic theming without per-component color tweaks.
  • Provides patterns for component composition, accessibility best practices, and React Hook Form integration.
  • Use cases include initializing new React projects with Tailwind v4 + shadcn/ui, implementing dark mode, extending components safely, and migrating from v3 color systems.

Quick Start

Initialize a React project, install Tailwind v4 and shadcn/ui, configure the CSS-variable theming pattern with @theme inline, and wrap your app with the theme provider.

Frequently Asked Questions about Tailwind v4 + shadcn/ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up dark mode with Tailwind v4 and shadcn/ui using CSS variables?▼

To set up dark mode with Tailwind v4 and shadcn/ui, configure a CSS-variable driven theming system using @theme inline mappings and toggle the .dark class. This architecture enables dynamic theming and semantic color tokens without per-component color tweaks.

How do I map Tailwind v4 design tokens to CSS variables for React apps?▼

You map Tailwind v4 design tokens to CSS variables using the @theme inline directive. This converts static tokens into a dynamic theming system, allowing React apps to apply semantic color tokens and switch dark mode via the .dark class.

Does shadcn/ui work with React Hook Form and Tailwind v4?▼

Yes, shadcn/ui integrates with React Hook Form in a Tailwind v4 setup. This theming pattern provides component composition and React Hook Form integration while maintaining Radix-based accessibility patterns across your UI.

Can I use Tailwind v4 CSS variables for accessible component composition?▼

Yes, Tailwind v4 CSS variables support accessible component composition by applying Radix-based accessibility patterns. This semantic token architecture ensures scalable and consistent UI components without requiring manual color adjustments per component.

Why use @theme inline for Tailwind v4 theming instead of static color values?▼

Using @theme inline for Tailwind v4 theming maps CSS variables to utilities dynamically, preventing the need for per-component color tweaks. This enables scalable component composition, consistent dark mode via the .dark class, and easier color system migration.

Related Skills

Explore More Software Engineering Skills→
MaxMiksaMaxMiksa
2.3k

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui for React and Vite projects.

Community
Advanced
kyamsSRLkyamsSRL

tailwind-design-system

Build Tailwind CSS v4 design systems with @theme tokens and CVA variants.

Community
Advanced
VKirillVKirill
15

shadcn

Install, configure, and theme shadcn/ui components in React apps.

Community
Intermediate
ChristineThamChristineTham

tailwind-design-system

Create Tailwind v4 design systems with CSS-first token theming.

Community
Advanced