AgentSkillsCN

Tailwindcss

TailwindCSS

SKILL.md

Tailwind CSS for Next.js

Tailwind CSS for Next.js development. Covers Tailwind v4 (CSS-first configuration), v3 patterns, dark mode, responsive design, custom plugins, and performance optimization. Always verify against current docs before writing Tailwind configuration.

License: MIT Author: Bala Version: 0.1.0

Quick Reference

Installation & Setup

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

Configuration Approaches

Tailwind v4 (CSS-first)

No more tailwind.config.js needed. Configure via CSS:

css
/* globals.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #ef4444;
  --spacing-gutter: 2rem;
}

Tailwind v3 (JavaScript config)

javascript
// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#ef4444',
      },
    },
  },
  plugins: [],
} satisfies Config

PostCSS Configuration

javascript
// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Global Styles

css
/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply scroll-smooth;
  }
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
  }
}

Dark Mode

Class Strategy (Recommended)

javascript
// tailwind.config.ts
export default {
  darkMode: 'class',
  // ...
}

Usage:

jsx
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en" className="dark">
      <body>{children}</body>
    </html>
  )
}

In components:

jsx
<div className="bg-white dark:bg-slate-900 text-black dark:text-white">
  Content
</div>

Media Strategy (System Preference)

javascript
// tailwind.config.ts
export default {
  darkMode: 'media',
  // ...
}

Responsive Design

Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)

jsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {items.map(item => <Item key={item.id} {...item} />)}
</div>

Common Patterns

Layout with Flexbox

jsx
<div className="flex flex-col md:flex-row gap-8">
  <aside className="md:w-64">Sidebar</aside>
  <main className="flex-1">Content</main>
</div>

Spacing & Sizing

jsx
<div className="space-y-4">
  <h1 className="text-3xl font-bold">Title</h1>
  <p className="text-lg text-gray-600">Description</p>
</div>

Typography Scale

jsx
<h1 className="text-4xl font-bold">h1</h1>
<h2 className="text-3xl font-semibold">h2</h2>
<h3 className="text-2xl font-semibold">h3</h3>
<p className="text-base leading-relaxed">Body text</p>

Custom Utilities & Plugins

Custom Utility Class

css
/* globals.css */
@layer utilities {
  .truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

Plugin Example

javascript
// tailwind.config.ts
import plugin from 'tailwindcss/plugin'

export default {
  plugins: [
    plugin(function({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.md'),
        }
      })
    })
  ],
}

Performance Optimization

JIT Mode (Default in v3+)

Just-in-time compilation is enabled by default. Tailwind watches your files and generates styles on-demand.

Content Purging

Ensure your content array covers all template files:

javascript
// tailwind.config.ts
export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
  ],
}

Bundle Size Analysis

bash
# Check what's included in your CSS
npm run build

v3 → v4 Migration

See v4-migration.md for detailed migration steps.

Key Changes:

  • •CSS-first configuration with @theme directive
  • •No more tailwind.config.js (optional)
  • •Automatic content detection
  • •New PostCSS plugin syntax
  • •Some utilities renamed/removed

Migration tool:

bash
npm install -D @tailwindcss/upgrade
npx @tailwindcss/upgrade

Documentation & Resources

Doc Lookup Strategy

  1. •Latest official docs: https://tailwindcss.com/docs/
  2. •Library lookup via Context7:
    • •resolve-library-id("tailwindcss") → get-library-docs
  3. •Blog for announcements: https://tailwindcss.com/blog

Always verify current Tailwind version and configuration approach before writing config files. Tailwind v4 is CSS-first, so check if the project is on v3 or v4.