Tailwind CSS Skill progressive_disclosure: entry_point: - summary - when_to_use - quick_start sections: core_concepts: - utility_first_approach - responsive_design - configuration advanced: - dark_mode - custom_utilities - plugins - performance_optimization integration: - framework_integration - component_patterns reference: - common_utilities - breakpoints - color_system tokens: entry: 75 full: 4500 Summary

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS. It offers responsive design, dark mode, customization through configuration, and integrates seamlessly with modern frameworks.

When to Use

Best for:

Rapid prototyping with consistent design systems Component-based frameworks (React, Vue, Svelte) Projects requiring responsive and dark mode support Teams wanting to avoid CSS file maintenance Design systems with standardized spacing/colors

Consider alternatives when:

Team unfamiliar with utility-first approach (learning curve) Project requires extensive custom CSS animations Legacy browser support needed (IE11) Minimal CSS footprint required without build process Quick Start Installation

npm

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

yarn

yarn add -D tailwindcss postcss autoprefixer npx tailwindcss init -p

pnpm

pnpm add -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Configuration

tailwind.config.js:

/ @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src//*.{js,jsx,ts,tsx}", "./public/index.html", ], theme: { extend: {}, }, plugins: [], }

Basic CSS Setup

styles/globals.css:

@tailwind base; @tailwind components; @tailwind utilities;

First Component // Simple button with Tailwind utilities function Button({ children, variant = 'primary' }) { const baseClasses = "px-4 py-2 rounded-lg font-medium transition-colors"; const variants = { primary: "bg-blue-600 text-white hover:bg-blue-700", secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300", danger: "bg-red-600 text-white hover:bg-red-700" };

return ( ${baseClasses} ${variants[variant]}}> {children} ); }

Core Concepts Utility-First Approach

Tailwind provides single-purpose utility classes that map directly to CSS properties.

Layout Utilities

Flexbox:

// Centered flex container

// Responsive flex direction

// Flex wrapping and alignment

Grid:

// Basic grid

// Responsive grid

// Auto-fit grid

Spacing System

Padding and Margin:

// Uniform spacing

// Directional spacing

// Negative margins

// Responsive spacing

Space Between:

// Gap between children

// Responsive gap

Typography // Font sizes and weights

Heading

Paragraph

Caption

// Text alignment and decoration

Centered underlined text

Right-aligned strikethrough

// Responsive typography

Responsive heading

// Text overflow handling

This text will be truncated with ellipsis...

This text will be clamped to 3 lines with ellipsis...

Colors // Background colors

// Text colors

Red text

Adaptive text

// Border colors

// Opacity modifiers

Responsive Design

Tailwind uses mobile-first breakpoint system.

Breakpoints // Default breakpoints (tailwind.config.js) { theme: { screens: { 'sm': '640px', // Small devices 'md': '768px', // Medium devices 'lg': '1024px', // Large devices 'xl': '1280px', // Extra large '2xl': '1536px', // 2X extra large } } }

Responsive Patterns // Hide/show at breakpoints

// Responsive layout

// Responsive grid

// Container with responsive padding

Configuration Theme Extension

tailwind.config.js:

/ @type {import('tailwindcss').Config} */ module.exports = { content: ['./src//*.{js,jsx,ts,tsx}'], theme: { extend: { colors: { brand: { 50: '#f0f9ff', 100: '#e0f2fe', 500: '#0ea5e9', 900: '#0c4a6e', }, accent: '#ff6b6b', }, spacing: { '18': '4.5rem', '88': '22rem', '128': '32rem', }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], display: ['Poppins', 'sans-serif'], mono: ['Fira Code', 'monospace'], }, fontSize: { '2xs': '0.625rem', '3xl': '2rem', }, borderRadius: { '4xl': '2rem', }, boxShadow: { 'inner-lg': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.1)', }, animation: { 'slide-in': 'slideIn 0.3s ease-out', 'fade-in': 'fadeIn 0.2s ease-in', }, keyframes: { slideIn: { '0%': { transform: 'translateX(-100%)' }, '100%': { transform: 'translateX(0)' }, }, fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' }, }, }, }, }, plugins: [], }

Custom Breakpoints module.exports = { theme: { screens: { 'xs': '475px', 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', '3xl': '1920px', // Custom breakpoints 'tablet': '640px', 'laptop': '1024px', 'desktop': '1280px', // Max-width breakpoints 'max-md': {'max': '767px'}, }, }, }

Advanced Features Dark Mode Class Strategy (Recommended)

tailwind.config.js:

module.exports = { darkMode: 'class', // or 'media' for OS preference // ... }

Implementation:

// Toggle component function DarkModeToggle() { const [isDark, setIsDark] = useState(false);

useEffect(() => { if (isDark) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } }, [isDark]);

return ( setIsDark(!isDark)} className="p-2 rounded-lg bg-gray-200 dark:bg-gray-700" > {isDark ? '🌞' : '🌙'} ); }

// Dark mode styles function Card() { return (

System Preference Strategy // tailwind.config.js module.exports = { darkMode: 'media', // Uses OS preference }

// Automatically adapts to system preference

Custom Utilities Adding Custom Utilities

tailwind.config.js:

const plugin = require('tailwindcss/plugin');

module.exports = { plugins: [ plugin(function({ addUtilities, addComponents, theme }) { // Custom utilities addUtilities({ '.scrollbar-hide': { '-ms-overflow-style': 'none', 'scrollbar-width': 'none', '&::-webkit-scrollbar': { display: 'none', }, }, '.text-balance': { 'text-wrap': 'balance', }, });

  // Custom components
  addComponents({
    '.btn': {
      padding: theme('spacing.4'),
      borderRadius: theme('borderRadius.lg'),
      fontWeight: theme('fontWeight.medium'),
      '&:hover': {
        opacity: 0.9,
      },
    },
    '.card': {
      backgroundColor: theme('colors.white'),
      borderRadius: theme('borderRadius.lg'),
      padding: theme('spacing.6'),
      boxShadow: theme('boxShadow.lg'),
    },
  });
}),

], }

Custom Variants const plugin = require('tailwindcss/plugin');

module.exports = { plugins: [ plugin(function({ addVariant }) { // Custom variant for third child addVariant('third', '&:nth-child(3)');

  // Custom variant for not-last child
  addVariant('not-last', '&:not(:last-child)');

  // Custom variant for group-hover with specific element
  addVariant('group-hover-show', '.group:hover &');
}),

], }

// Usage

Plugins Official Plugins npm install -D @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

tailwind.config.js:

module.exports = { plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio'), ], }

Forms Plugin // Automatic form styling

Typography Plugin // Beautiful prose styling

Aspect Ratio Plugin // Maintain aspect ratios