skills.rest
blockmatic
blockmaticOFFICIAL
Explore all skills by this author →
Website𝕏@blockmatic_ioGitHub

Tailwind v4 + shadcn/ui

Define Tailwind v4 and shadcn/ui theming with CSS variables and dark mode.

88|11|Updated Apr 28, 2020
Search Tags:#theming#architecture#tailwind#dark-mode#css-variables#ui-patterns
One-click install
npx skills add https://github.com/blockmatic/basilic --skill tailwind-v4-shadcn-ui-blockmatic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Tailwind v4 + shadcn/ui
Source: https://github.com/blockmatic/basilic/tree/main/.cursor/skills/shadcn-v3
Command: npx skills add https://github.com/blockmatic/basilic --skill tailwind-v4-shadcn-ui-blockmatic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The setup provides a cohesive pattern for Tailwind v4 + shadcn/ui theming, enabling consistent CSS variable usage, dark mode handling, and ready-made templates.

Core Features & Use Cases

  • CSS variable-based theming with @theme inline mapping to generate utilities
  • Dark mode support via root and .dark overrides with semantic tokens
  • Reusable patterns for component composition, accessibility, and React Hook Form integration
  • Works across Vite/Next.js templates with templated guidance and references

Quick Start

Initialize a React project with Vite and apply the Tailwind v4 + shadcn/ui pattern using the provided templates and references.

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 Tailwind v4 and shadcn/ui theming with CSS variables?▼

Tailwind v4 dark mode support uses semantic tokens with root and .dark class overrides, managed by a ThemeProvider workflow to switch between light and dark themes seamlessly.

What is the best way to migrate shadcn/ui theming from Tailwind v3 to v4?▼

Yes, the Tailwind v4 and shadcn/ui pattern works across both Vite and Next.js templates, providing reusable component composition patterns and React Hook Form integration for accessible applications.

How do I configure semantic tokens for accessible components using Tailwind CSS variables?▼

Configuring semantic tokens involves defining base layer guidelines in your CSS and mapping them via @theme inline, which allows Radix UI patterns to consume these variables for accessible component styling.

Why use @theme inline mappings for Tailwind v4 CSS variables?▼

Using @theme inline mappings for Tailwind v4 CSS variables generates utility classes directly from your design tokens, ensuring a cohesive theming architecture that supports runtime dark mode overrides.

Related Skills

Explore More Software Engineering Skills→
evolv3aievolv3ai
3

tailwind-v4-shadcn

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

Community
Intermediate
YanchiHuangYanchiHuang

shadcn-ui

Install, configure, and implement accessible React UI components with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate
JoseLopezGonzalezJoseLopezGonzalez

shadcn-ui

Implement shadcn/ui, Radix UI, and Tailwind CSS components in React applications.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

tailwind-v4-shadcn

Migrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.

Community
Advanced