Skills
.Work. You
Rest

shadcn-tailwind

Community

Build UIs with Tailwind v4 & shadcn/ui.

Software Engineering#frontend#react#css#shadcn/ui#tailwind#ui development#oklch
Authortenequm
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the process of building modern, accessible, and responsive user interfaces using Tailwind CSS v4 and the shadcn/ui component library, ensuring consistency and best practices.

Core Features & Use Cases

  • Tailwind CSS v4 Configuration: Adapts to Tailwind v4's CSS-first configuration, migrating away from tailwind.config.js.
  • Semantic OKLCH Colors: Employs OKLCH color space for theming, dark mode, and accessibility.
  • Component Authoring: Demonstrates patterns for creating reusable components with class-variance-authority (CVA) and data-slot attributes.
  • Responsive Design & Container Queries: Implements mobile-first breakpoints and container query usage.
  • Accessibility Best Practices: Integrates focus visible states, screen reader only text, and disabled states.
  • Use Case: When starting a new React project and needing to quickly set up a visually consistent and accessible design system using the latest Tailwind CSS and shadcn/ui patterns.

Quick Start

Use the shadcn-tailwind skill to set up a new project with Tailwind CSS v4 and shadcn/ui components.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-tailwind
Download link: https://github.com/tenequm/skills/archive/main.zip#shadcn-tailwind

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.