| name | styling-with-tailwind |
| description | Provides utility-first CSS styling patterns using Tailwind CSS 3.x. Use when styling components with utility classes, configuring tailwind.config.js, implementing responsive designs, or creating dark mode themes. |
| metadata | {"author":"fortiumpartners"} |
Tailwind CSS 3.x Skill
Target: Tailwind CSS 3.4+ | Purpose: Utility-first CSS styling reference
Table of Contents
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:
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">
</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
<div class="flex flex-col md:flex-row gap-4">
<div class="hidden lg:block">Desktop only</div>
<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
<div class="group hover:bg-gray-100">
<span class="group-hover:text-blue-500">Hover parent</span>
</div>
<input class="peer" type="checkbox" />
<label class="peer-checked:text-green-500">Checked!</label>
Dark Mode
Configuration
module.exports = {
darkMode: 'class',
}
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
content array
- Avoid Dynamic Classes:
bg-${color}-500 won't work
className={`bg-${color}-500`}
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.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
