init-tailwind

Initialize TailwindCSS Project

This command sets up a new TailwindCSS project with best practices and optimal configuration.

What This Command Does

1. Install TailwindCSS and Dependencies

   • Installs TailwindCSS, PostCSS, and Autoprefixer
   • Adds common TailwindCSS plugins
   • Sets up development dependencies

2. Create Configuration Files

   • Generates optimized tailwind.config.js
   • Creates postcss.config.js
   • Sets up CSS entry point with Tailwind directives

3. Configure Content Paths

   • Sets up content scanning for your framework
   • Optimizes purging configuration
   • Adds safelist for dynamic classes

Usage Examples

Next.js Project

# Install TailwindCSS for Next.js
npm install -D tailwindcss postcss autoprefixer @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio

# Generate config files
npx tailwindcss init -p

# Configure for Next.js paths

React/Vite Project

# Install TailwindCSS for Vite
npm install -D tailwindcss postcss autoprefixer @tailwindcss/typography @tailwindcss/forms

# Generate config
npx tailwindcss init -p

# Configure for React/Vite paths

Vanilla HTML Project

# Install TailwindCSS CLI
npm install -D tailwindcss

# Generate config
npx tailwindcss init

# Build CSS file
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Configuration Templates

Optimized Tailwind Config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe', 
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
}