shadcn/ui + Tailwind CSS 实战：构建美观可访问的 React UI 组件与设计系统

ckm%3Aui-styling by nextlevelbuilder/ui-ux-pro-max-skill

2,900 周安装量

48,900 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:ui-styling

开发设计

🇨🇳中文介绍

UI 样式技能

结合 shadcn/ui 组件、Tailwind CSS 实用样式和基于画布的可视化设计系统，创建美观、可访问用户界面的综合技能。

参考

shadcn/ui: https://ui.shadcn.com/llms.txt
Tailwind CSS: https://tailwindcss.com/docs

何时使用此技能

在以下情况下使用：

使用基于 React 的框架（Next.js、Vite、Remix、Astro）构建 UI
实现可访问组件（对话框、表单、表格、导航）
使用实用优先的 CSS 方法进行样式设计
创建响应式、移动优先的布局
实现深色模式和主题自定义
使用一致的令牌构建设计系统
生成视觉设计、海报或品牌材料
通过即时视觉反馈进行快速原型设计
添加复杂的 UI 模式（数据表格、图表、命令面板）

核心技术栈

组件层：shadcn/ui

通过 Radix UI 原语提供预构建的可访问组件
复制-粘贴分发模型（组件存在于您的代码库中）
TypeScript 优先，具有完整的类型安全
用于复杂 UI 的可组合原语
基于 CLI 的安装和管理

样式层：Tailwind CSS

实用优先的 CSS 框架
构建时处理，零运行时开销
移动优先的响应式设计
一致的设计令牌（颜色、间距、排版）
自动死代码消除

视觉设计层：Canvas

博物馆级别的视觉构图
哲学驱动的设计方法
复杂的视觉传达
最少的文字，最大的视觉冲击力
系统化的模式和精致的美学

快速开始

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

组件 + 样式设置

使用 Tailwind 安装 shadcn/ui：

npx shadcn@latest init

CLI 会提示您选择框架、TypeScript、路径和主题偏好。这将配置 shadcn/ui 和 Tailwind CSS。

npx shadcn@latest add button card dialog form

使用带有实用样式的组件：

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

备选方案：仅使用 Tailwind 的设置

npm install -D tailwindcss @tailwindcss/vite



// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }



/* src/index.css */
@import "tailwindcss";

包含使用模式、安装和组合示例的完整组件目录。

参见：references/shadcn-components.md

表单和输入组件（Button、Input、Select、Checkbox、Date Picker、Form validation）
布局和导航（Card、Tabs、Accordion、Navigation Menu）
覆盖层和对话框（Dialog、Drawer、Popover、Toast、Command）
反馈和状态（Alert、Progress、Skeleton）
显示组件（Table、Data Table、Avatar、Badge）

主题配置、CSS 变量、深色模式实现和组件自定义。

参见：references/shadcn-theming.md

使用 next-themes 设置深色模式
CSS 变量系统
颜色自定义和调色板
组件变体自定义
主题切换实现

ARIA 模式、键盘导航、屏幕阅读器支持和可访问组件使用。

参见：references/shadcn-accessibility.md

Radix UI 可访问性特性
键盘导航模式
焦点管理
屏幕阅读器公告
表单验证可访问性

Tailwind 实用工具

用于布局、间距、排版、颜色、边框和阴影的核心实用类。

参见：references/tailwind-utilities.md

布局实用工具（Flexbox、Grid、定位）
间距系统（内边距、外边距、间隙）
排版（字体大小、粗细、对齐、行高）
颜色和背景
边框和阴影
用于自定义样式的任意值

移动优先的断点、响应式实用工具和自适应布局。

参见：references/tailwind-responsive.md

移动优先方法
断点系统（sm、md、lg、xl、2xl）
响应式实用工具模式
容器查询
最大宽度查询
自定义断点

配置文件结构、自定义实用工具、插件和主题扩展。

参见：references/tailwind-customization.md

用于自定义令牌的 @theme 指令
自定义颜色和字体
间距和断点扩展
自定义实用工具创建
自定义变体
层组织（@layer base、components、utilities）
用于组件提取的 Apply 指令

基于画布的设计理念、视觉传达原则和复杂的构图。

参见：references/canvas-design-system.md

设计哲学方法
视觉传达优于文字
系统化的模式和构图
颜色、形式和空间设计
最少的文字集成
博物馆级别的执行
多页面设计系统

用于组件安装和配置生成的 Python 自动化脚本。

添加 shadcn/ui 组件并处理依赖关系：

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

生成带有自定义主题的 tailwind.config.js：

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

组件组合：从简单、可组合的原语构建复杂 UI
实用优先样式：直接使用 Tailwind 类；仅对真正重复的部分提取组件
移动优先响应式：从移动端样式开始，叠加响应式变体
可访问性优先：利用 Radix UI 原语，添加焦点状态，使用语义化 HTML
设计令牌：使用一致的间距比例、颜色调色板、排版系统
深色模式一致性：对所有主题化元素应用深色变体
性能：利用自动 CSS 清除，避免动态类名
TypeScript：使用完整的类型安全以获得更好的开发体验
视觉层次：让构图引导注意力，有意识地使用间距和颜色
专家级工艺：每个细节都很重要 - 将 UI 视为一门手艺

references/shadcn-components.md - 完整组件目录
references/shadcn-theming.md - 主题和自定义
references/shadcn-accessibility.md - 可访问性模式

references/tailwind-utilities.md - 核心实用类
references/tailwind-responsive.md - 响应式设计
references/tailwind-customization.md - 配置和扩展

references/canvas-design-system.md - 设计理念和画布工作流

scripts/shadcn_add.py - 组件安装
scripts/tailwind_config_gen.py - 配置生成

带验证的表单：

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

带深色模式的响应式布局：

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

shadcn/ui 文档：https://ui.shadcn.com
Tailwind CSS 文档：https://tailwindcss.com
Radix UI：https://radix-ui.com
Tailwind UI：https://tailwindui.com
Headless UI：https://headlessui.com
v0（AI UI 生成器）：https://v0.dev

🇺🇸English

UI Styling Skill

Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.

Reference

shadcn/ui: https://ui.shadcn.com/llms.txt
Tailwind CSS: https://tailwindcss.com/docs

When to Use This Skill

Use when:

Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
Implementing accessible components (dialogs, forms, tables, navigation)
Styling with utility-first CSS approach
Creating responsive, mobile-first layouts
Implementing dark mode and theme customization
Building design systems with consistent tokens
Generating visual designs, posters, or brand materials
Rapid prototyping with immediate visual feedback
Adding complex UI patterns (data tables, charts, command palettes)

Core Stack

Component Layer: shadcn/ui

Pre-built accessible components via Radix UI primitives
Copy-paste distribution model (components live in your codebase)
TypeScript-first with full type safety
Composable primitives for complex UIs
CLI-based installation and management

Styling Layer: Tailwind CSS

Utility-first CSS framework
Build-time processing with zero runtime overhead
Mobile-first responsive design
Consistent design tokens (colors, spacing, typography)
Automatic dead code elimination

Visual Design Layer: Canvas

Museum-quality visual compositions
Philosophy-driven design approach
Sophisticated visual communication
Minimal text, maximum visual impact
Systematic patterns and refined aesthetics

Quick Start

Component + Styling Setup

Install shadcn/ui with Tailwind:

npx shadcn@latest init

CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.

Add components:

npx shadcn@latest add button card dialog form

Use components with utility styling:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

Alternative: Tailwind-Only Setup

Vite projects:

npm install -D tailwindcss @tailwindcss/vite



// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }



/* src/index.css */
@import "tailwindcss";

Component Library Guide

Comprehensive component catalog with usage patterns, installation, and composition examples.

See: references/shadcn-components.md

Covers:

Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
Feedback & status (Alert, Progress, Skeleton)
Display components (Table, Data Table, Avatar, Badge)

Theme & Customization

Theme configuration, CSS variables, dark mode implementation, and component customization.

See: references/shadcn-theming.md

Covers:

Dark mode setup with next-themes
CSS variable system
Color customization and palettes
Component variant customization
Theme toggle implementation

Accessibility Patterns

ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.

See: references/shadcn-accessibility.md

Covers:

Radix UI accessibility features
Keyboard navigation patterns
Focus management
Screen reader announcements
Form validation accessibility

Tailwind Utilities

Core utility classes for layout, spacing, typography, colors, borders, and shadows.

See: references/tailwind-utilities.md

Covers:

Layout utilities (Flexbox, Grid, positioning)
Spacing system (padding, margin, gap)
Typography (font sizes, weights, alignment, line height)
Colors and backgrounds
Borders and shadows
Arbitrary values for custom styling

Responsive Design

Mobile-first breakpoints, responsive utilities, and adaptive layouts.

See: references/tailwind-responsive.md

Covers:

Mobile-first approach
Breakpoint system (sm, md, lg, xl, 2xl)
Responsive utility patterns
Container queries
Max-width queries
Custom breakpoints

Tailwind Customization

Config file structure, custom utilities, plugins, and theme extensions.

See: references/tailwind-customization.md

Covers:

@theme directive for custom tokens
Custom colors and fonts
Spacing and breakpoint extensions
Custom utility creation
Custom variants
Layer organization (@layer base, components, utilities)
Apply directive for component extraction

Visual Design System

Canvas-based design philosophy, visual communication principles, and sophisticated compositions.

See: references/canvas-design-system.md

Covers:

Design philosophy approach
Visual communication over text
Systematic patterns and composition
Color, form, and spatial design
Minimal text integration
Museum-quality execution
Multi-page design systems

Utility Scripts

Python automation for component installation and configuration generation.

shadcn_add.py

Add shadcn/ui components with dependency handling:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

Generate tailwind.config.js with custom theme:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

Best Practices

Component Composition : Build complex UIs from simple, composable primitives
Utility-First Styling : Use Tailwind classes directly; extract components only for true repetition
Mobile-First Responsive : Start with mobile styles, layer responsive variants
Accessibility-First : Leverage Radix UI primitives, add focus states, use semantic HTML
Design Tokens : Use consistent spacing scale, color palettes, typography system
Dark Mode Consistency : Apply dark variants to all themed elements
Performance : Leverage automatic CSS purging, avoid dynamic class names
TypeScript : Use full type safety for better DX
Visual Hierarchy : Let composition guide attention, use spacing and color intentionally
Expert Craftsmanship : Every detail matters - treat UI as a craft

Reference Navigation

Component Library

references/shadcn-components.md - Complete component catalog
references/shadcn-theming.md - Theming and customization
references/shadcn-accessibility.md - Accessibility patterns

Styling System

references/tailwind-utilities.md - Core utility classes
references/tailwind-responsive.md - Responsive design
references/tailwind-customization.md - Configuration and extensions

Visual Design

references/canvas-design-system.md - Design philosophy and canvas workflows

Automation

scripts/shadcn_add.py - Component installation
scripts/tailwind_config_gen.py - Config generation

Common Patterns

Form with validation:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

Responsive layout with dark mode:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

Resources

shadcn/ui Docs: https://ui.shadcn.com
Tailwind CSS Docs: https://tailwindcss.com
Radix UI: https://radix-ui.com
Tailwind UI: https://tailwindui.com
Headless UI: https://headlessui.com
v0 (AI UI Generator): https://v0.dev

Weekly Installs

2.9K

Repository

nextlevelbuilde…ax-skill

GitHub Stars

48.9K

First Seen

14 days ago

Installed on

codex2.6K

gemini-cli2.6K

cursor2.6K

opencode2.6K

github-copilot2.6K

cline2.6K

shadcn/ui + Tailwind CSS 实战：构建美观可访问的 React UI 组件与设计系统

🇨🇳中文介绍

UI 样式技能

参考

何时使用此技能

核心技术栈

组件层：shadcn/ui

样式层：Tailwind CSS

视觉设计层：Canvas

快速开始

相关 Skills

组件 + 样式设置

备选方案：仅使用 Tailwind 的设置

组件库指南

主题与自定义

可访问性模式

Tailwind 实用工具

响应式设计

Tailwind 自定义

视觉设计系统

实用脚本

shadcn_add.py

tailwind_config_gen.py

最佳实践

参考导航

常见模式

资源

🇺🇸English

UI Styling Skill

Reference

When to Use This Skill

Core Stack

Component Layer: shadcn/ui

Styling Layer: Tailwind CSS

Visual Design Layer: Canvas

Quick Start

Component + Styling Setup

Alternative: Tailwind-Only Setup

Component Library Guide

Theme & Customization

Accessibility Patterns

Tailwind Utilities

Responsive Design

Tailwind Customization

Visual Design System

Utility Scripts

shadcn_add.py

tailwind_config_gen.py

Best Practices

Reference Navigation

Common Patterns

Resources