majiayu000 Tailwind CSS 3.x Skill
Target: Tailwind CSS 3.4+ | Purpose: Utility-first CSS styling reference
Table of Contents
- Overview
- Quick Start
- Core Utility Classes
- Flexbox
- Grid
- Responsive Design
- State Variants
- Dark Mode
- Basic Configuration
- Essential Component Patterns
- @apply Directive
- Arbitrary Values
- Performance Tips
- Quick Reference Card
Overview
What is Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to build custom designs directly in markup.
When to Use This Skill:
- Styling components with utility classes
- Configuring
tailwind.config.js - Implementing responsive designs
- Creating dark mode themes
Prerequisites: Node.js 14.0+ (for build tools)
Quick Start
Installation
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Minimal Configuration
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx,html}", "./index.html"],
theme: { extend: {} },
plugins: [],
}
CSS Entry Point:
@tailwind base;
@tailwind components;
@tailwind utilities;
Core Utility Classes
Spacing (Margin & Padding)
| Pattern | Example | Result |
|---|---|---|
m-{size} |
m-4 |
margin: 1rem |
p-{size} |
p-8 |
padding: 2rem |
mx-auto |
mx-auto |
center horizontally |
space-x-{size} |
space-x-4 |
horizontal gap between children |
Scale: 0=0px, 1=0.25rem, 2=0.5rem, 4=1rem, 8=2rem, 16=4rem
Colors
Format: {property}-{color}-{shade}
<div class="bg-blue-500 text-white border-gray-300">
Properties: text-, bg-, border-, ring-, divide-
Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
Typography
| Class | Effect |
|---|---|
text-sm/base/lg/xl/2xl |
Font size |
font-normal/medium/semibold/bold |
Font weight |
text-left/center/right |
Text alignment |
truncate |
Ellipsis overflow |
line-clamp-{1-6} |
Multi-line truncation |
Sizing
| Pattern | Example |
|---|---|
w-full, w-1/2, w-64 |
Width |
h-screen, h-48 |
Height |
max-w-sm/md/lg/xl |
Max width |
size-10 |
Width + height together |
Flexbox
Quick Pattern
<div class="flex flex-row items-center justify-between gap-4">
<!-- children -->
</div>
| Class | Effect |
|---|---|
flex / flex-col |
Enable flexbox, set direction |
items-center |
Vertical alignment |
justify-between |
Horizontal distribution |
gap-4 |
Gap between items |
flex-1 |
Grow to fill space |
shrink-0 |
Prevent shrinking |
Grid
Quick Pattern
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2">Wide</div>
<div>Normal</div>
</div>
| Class | Effect |
|---|---|
grid-cols-{1-12} |
Column count |
col-span-{1-12} |
Span columns |
gap-{size} |
Gap between cells |
Auto-fit Pattern (Responsive without Breakpoints)
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
Responsive Design
Breakpoint Prefixes (Mobile-First)
| Prefix | Min-Width |
|---|---|
sm: |
640px |
md: |
768px |
lg: |
1024px |
xl: |
1280px |
2xl: |
1536px |
Common Patterns
<!-- Stack on mobile, row on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">
<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">Desktop only</div>
<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
State Variants
Hover, Focus, Active
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 active:bg-blue-700">
| Prefix | Trigger |
|---|---|
hover: |
Mouse over |
focus: |
Element focused |
active: |
Being clicked |
disabled: |
Disabled element |
Group and Peer
<!-- Group: parent state affects children -->
<div class="group hover:bg-gray-100">
<span class="group-hover:text-blue-500">Hover parent</span>
</div>
<!-- Peer: sibling state affects element -->
<input class="peer" type="checkbox" />
<label class="peer-checked:text-green-500">Checked!</label>
Dark Mode
Configuration
// tailwind.config.js
module.exports = {
darkMode: 'class', // or 'media' for OS preference
}
Usage
<html class="dark">
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
Basic Configuration
Extending Theme
module.exports = {
theme: {
extend: {
colors: {
brand: { 500: '#3b82f6', 900: '#1e3a8a' },
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
},
}
See REFERENCE.md for advanced configuration (custom screens, container, presets, plugins).
Essential Component Patterns
Button
<button class="
px-4 py-2
bg-blue-500 hover:bg-blue-600
text-white font-medium rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-300
disabled:opacity-50 disabled:cursor-not-allowed
transition-colors
">
Button
</button>
Card
<div class="
bg-white dark:bg-gray-800
rounded-xl shadow-lg p-6
border border-gray-200 dark:border-gray-700
">
<h3 class="text-xl font-semibold">Title</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">Description</p>
</div>
See REFERENCE.md for more component patterns (input, navigation, badge, modal).
@apply Directive
Extract repeated utilities into custom classes:
@layer components {
.btn {
@apply px-4 py-2 rounded-lg font-medium transition-colors;
}
.btn-primary {
@apply btn bg-blue-500 text-white hover:bg-blue-600;
}
}
When to Use: Repeated utility combinations, component libraries When to Avoid: One-off styles (use inline utilities)
Arbitrary Values
Use brackets for one-off custom values:
<div class="w-[137px]">Exact width</div>
<div class="bg-[#1da1f2]">Custom color</div>
<div class="grid-cols-[1fr_500px_2fr]">Custom columns</div>
Performance Tips
- Content Configuration: Ensure all template paths are in
contentarray - Avoid Dynamic Classes:
bg-${color}-500won't work
// DON'T
className={`bg-${color}-500`}
// DO
const colorClasses = { blue: 'bg-blue-500', red: 'bg-red-500' };
className={colorClasses[color]}
Quick Reference Card
SPACING: m-4 p-4 mx-auto space-x-4 gap-4
SIZING: w-full h-screen max-w-xl size-10
FLEX: flex flex-col items-center justify-between flex-1
GRID: grid grid-cols-3 col-span-2 gap-4
TEXT: text-lg font-bold text-center truncate
COLORS: bg-blue-500 text-white border-gray-300
BORDERS: border rounded-lg border-2
SHADOWS: shadow-sm shadow-lg
POSITION: absolute relative fixed sticky top-0 z-50
RESPONSIVE: sm: md: lg: xl: 2xl:
STATES: hover: focus: active: disabled: dark:
TRANSITIONS: transition duration-200
See Also: REFERENCE.md for:
- Complete utility class reference (layout, typography, effects, filters)
- Advanced configuration (presets, content transform, safelist)
- Custom plugin development
- Animation utilities and custom keyframes
- Typography plugin usage
- CSS-in-JS integration (twin.macro, CVA, clsx)
- Framework integration (Next.js, Vite, Nuxt, SvelteKit)
- Performance optimization
- Migration guides
See Also: REFERENCE.md for comprehensive documentation.