Tailwind CSS Skill
Utility-first CSS framework for rapid, consistent UI development.
Quick Start
Installation
# npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# pnpm
pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p
Configuration
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}
CSS Setup
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Core Concepts
| Concept |
Guide |
| Utility Classes |
reference/utilities.md |
| Responsive Design |
reference/responsive.md |
| Dark Mode |
reference/dark-mode.md |
| Customization |
reference/customization.md |
Examples
| Pattern |
Guide |
| Layout Patterns |
examples/layouts.md |
| Spacing Systems |
examples/spacing.md |
| Typography |
examples/typography.md |
Templates
| Template |
Purpose |
| templates/tailwind.config.ts |
Extended configuration |
Quick Reference
Spacing Scale
| Class |
Value |
Pixels |
0 |
0 |
0px |
0.5 |
0.125rem |
2px |
1 |
0.25rem |
4px |
2 |
0.5rem |
8px |
3 |
0.75rem |
12px |
4 |
1rem |
16px |
5 |
1.25rem |
20px |
6 |
1.5rem |
24px |
8 |
2rem |
32px |
10 |
2.5rem |
40px |
12 |
3rem |
48px |
16 |
4rem |
64px |
20 |
5rem |
80px |
24 |
6rem |
96px |
Breakpoints
| Prefix |
Min-width |
CSS |
sm |
640px |
@media (min-width: 640px) |
md |
768px |
@media (min-width: 768px) |
lg |
1024px |
@media (min-width: 1024px) |
xl |
1280px |
@media (min-width: 1280px) |
2xl |
1536px |
@media (min-width: 1536px) |
Common Utilities
// Layout
<div className="flex items-center justify-between" />
<div className="grid grid-cols-3 gap-4" />
<div className="container mx-auto px-4" />
// Spacing
<div className="p-4 m-2 space-y-4" />
<div className="px-6 py-3 mt-4 mb-8" />
// Typography
<h1 className="text-4xl font-bold tracking-tight" />
<p className="text-sm text-muted-foreground leading-relaxed" />
// Colors
<div className="bg-primary text-primary-foreground" />
<div className="bg-slate-100 dark:bg-slate-900" />
// Borders & Effects
<div className="rounded-lg border shadow-sm" />
<div className="ring-2 ring-primary ring-offset-2" />
// Sizing
<div className="w-full h-screen max-w-md min-h-[200px]" />
// Position
<div className="relative absolute top-0 left-0 z-10" />
<div className="fixed bottom-4 right-4 sticky top-0" />
State Variants
// Hover, Focus, Active
<button className="hover:bg-primary/90 focus:ring-2 active:scale-95" />
// Disabled
<button className="disabled:opacity-50 disabled:cursor-not-allowed" />
// Group hover
<div className="group">
<span className="group-hover:text-primary" />
</div>
// Focus within
<div className="focus-within:ring-2" />
// First/Last child
<li className="first:pt-0 last:pb-0" />
Responsive Patterns
// Mobile-first responsive
<div className="text-sm md:text-base lg:text-lg" />
<div className="flex-col md:flex-row" />
<div className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" />
<div className="hidden md:block" />
<div className="md:hidden" />
Dark Mode
// Dark mode variants
<div className="bg-white dark:bg-slate-950" />
<p className="text-slate-900 dark:text-slate-100" />
<div className="border-slate-200 dark:border-slate-800" />
Best Practices
- Mobile-first: Start with mobile styles, add breakpoint prefixes for larger screens
- Consistent spacing: Use the spacing scale (4, 8, 12, 16, 24, 32, 48, 64)
- Semantic colors: Use design tokens (
primary, muted, destructive) over raw colors
- Component extraction: Use
@apply sparingly, prefer component abstraction
- Arbitrary values: Use
[value] syntax for one-off values: w-[237px]
Integration with shadcn/ui
Tailwind CSS is the styling foundation for shadcn/ui. The shadcn skill covers:
- CSS variables for theming
- Component-specific utility patterns
- Design token integration
See shadcn skill for component-specific patterns.
majiayu000