skills.rest
bluebricks-nl
bluebricks-nlOFFICIAL
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

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

Updated Feb 4, 2026
Search Tags:#react#shadcn/ui#vite#tailwind#ui components#dark mode#css variables
One-click install
npx skills add https://github.com/bluebricks-nl/blue-bricks-template --skill tailwind-v4-shadcn-bluebricks-nl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/bluebricks-nl/blue-bricks-template/tree/main/.claude/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/bluebricks-nl/blue-bricks-template --skill tailwind-v4-shadcn-bluebricks-nl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and templates (resource) components.

What problem does it solve?

This Skill streamlines the setup of a modern React frontend using Tailwind CSS v4 and shadcn/ui, ensuring a robust, themeable, and production-ready development environment.

Core Features & Use Cases

  • Tailwind v4 Integration: Configures the latest Tailwind CSS with Vite for optimal performance.
  • shadcn/ui Setup: Integrates shadcn/ui components with a focus on CSS variable architecture and dark mode.
  • Use Case: Kickstart a new React project with a best-in-class UI stack, or refactor an existing project to adopt Tailwind v4 and shadcn/ui for improved maintainability and theming capabilities.

Quick Start

Run the setup command to integrate Tailwind v4 and shadcn/ui into your Vite-based React project.

Frequently Asked Questions about tailwind-v4-shadcn

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

FAQPage Schema
How do I set up Tailwind CSS v4 and shadcn/ui in a Vite React project?▼

To set up Tailwind CSS v4 and shadcn/ui in a Vite React project, you configure the frameworks together by establishing a CSS variable architecture for theming and enabling dark mode support.

How do I migrate from Tailwind v3 to v4 when using shadcn/ui components?▼

Migrating from Tailwind v3 to v4 with shadcn/ui involves addressing common migration issues by updating your configuration to ensure proper integration of shadcn/ui components and utilities within the new Tailwind environment.

Does shadcn/ui support dark mode using CSS variables in Tailwind v4?▼

Yes, shadcn/ui supports dark mode in Tailwind v4 by establishing a CSS variable architecture that enables robust theming capabilities and proper dark mode integration across your React components.

What is the best way to configure a themeable React UI with Tailwind v4 and shadcn/ui?▼

The best way to configure a themeable React UI with Tailwind v4 and shadcn/ui is to establish a CSS variable architecture, which ensures a robust, themeable, and production-ready development environment.

Why are my shadcn/ui utilities not working after upgrading to Tailwind CSS v4?▼

If shadcn/ui utilities are not working after upgrading to Tailwind CSS v4, it is likely due to common migration issues from Tailwind v3 that require specific configuration adjustments to ensure proper integration.

Related Skills

Explore More Software Engineering Skills→
hunmerhunmer
70

convert-react-to-memento

Converts a React project into a Memento WebView-ready application.

Community
Intermediate
evolv3aievolv3ai
3

tailwind-v4-shadcn

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

Community
Intermediate
cenjiecenjie

tanstack-integration-best-practices

Integrate TanStack Query with TanStack Router for SSR-safe data fetching and caching.

Community
Advanced
JordiNodeJSJordiNodeJS

component-development

Create accessible React 19 UI components with Shadcn UI and Tailwind CSS 4.

Community
Intermediate