Shadcn Analytics
A strong base for Tailwind + shadcn/ui dashboards, cards, filters, and KPI-heavy layouts.
Open templateTailwind CSS UI 提示词
为 Tailwind CSS 优化的 AI 提示词 — 响应式布局、组件模式、design tokens 和工具类优先样式。
Tailwind UI promptTailwind CSS component promptTailwind design promptTailwind layout promptshadcn UI promptTailwind responsive design
关于此主题
Tailwind CSS 是 AI 生成代码中最流行的工具类优先 CSS 框架。在提示 AI 工具生成 Tailwind 代码时，具体指定类名、断点、间距值和组件模式能产生显著更好的结果。本合集提供使用 Tailwind 语言优化的提示词，帮助 AI 工具生成具备响应式设计、暗黑模式支持和可访问标记的生产就绪代码。
提示词示例
AI 提示词示例
复制这些提示词，用你喜欢的 AI 工具生成Tailwind CSS UI 提示词设计。
响应式导航
GeneralBuild a responsive navigation bar with Tailwind CSS. Desktop: horizontal nav with logo (left), links (center), and CTA button (right) using 'flex items-center justify-between max-w-7xl mx-auto px-6 h-16'. Mobile: hamburger menu button that toggles a full-screen overlay nav using 'fixed inset-0 bg-white z-50 flex flex-col items-center justify-center gap-8'. Breakpoint: 'md' for the switch. Include smooth transition with 'transition-all duration-300'. Support dark mode with 'dark:bg-zinc-950 dark:text-white'.
v0 组件网格
v0Create a responsive card grid using shadcn/ui and Tailwind. Grid: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6'. Each card: shadcn Card with CardHeader (image placeholder, aspect-video), CardContent (title in font-semibold, description in text-sm text-muted-foreground), CardFooter (price badge and action button). Cards should have 'hover:shadow-lg transition-shadow' and 'group' class for hover effects on the image (scale-105). Include skeleton loading state using shadcn Skeleton component.
Cursor 表单布局
CursorBuild a multi-step form with Tailwind CSS in Next.js. Container: 'max-w-2xl mx-auto py-12 px-6'. Step indicator: horizontal dots connected by lines, active step highlighted. Each step: form fields using 'space-y-6' with labels in 'text-sm font-medium' and inputs in 'w-full px-3 py-2 border border-zinc-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-zinc-900 dark:border-zinc-700'. Navigation: 'flex justify-between mt-8' with Back/Next buttons. Animate step transitions with 'transition-opacity duration-200'.
Claude Design Tokens
ClaudeGenerate a Tailwind CSS configuration with a complete design token system. Include: custom color palette (primary, secondary, accent, success, warning, danger, each with 50-950 shades), spacing scale extending the default (adding 18, 22, 30 for fine-grained control), custom font family stack (sans, serif, mono), border-radius tokens (none, sm, md, lg, xl, full), box-shadow tokens (sm, md, lg, xl, glow), and custom animation tokens (fade-in, slide-up, scale-in). Also create CSS custom properties that mirror the tokens for use in non-Tailwind contexts. Output as a tailwind.config.ts file.
适用场景
最佳使用场景
快速原型
用工具类优先 CSS 和 AI 工具快速构建功能原型。
设计系统实现
将 Figma 设计转化为 Tailwind 组件库。
全栈应用
使用一致的 Tailwind 样式构建完整的 Next.js/React 应用。
组件库
使用 Tailwind 变体和 shadcn/ui 创建可复用组件库。
常见问题
常见问题解答
Previews
Example previews and starter templates
Use these templates as Tailwind prompt references by naming components, layout classes, breakpoints, states, and design tokens together.
Documentation Site
Useful for developer docs, sidebar navigation, content hierarchy, and utility-first content layouts.
Open templateSaaS Landing Page
Helpful for Tailwind marketing pages with clean section rhythm, CTA hierarchy, and responsive spacing.
Open templateFile Manager App
A practical app-shell reference for tables, list-detail panels, toolbars, and denser Tailwind patterns.
Open template