Skip to content

TAILWIND_SETUP.md

Latest commit

 

History

History
254 lines (182 loc) · 5.28 KB

TAILWIND_SETUP.md

File metadata and controls

254 lines (182 loc) · 5.28 KB

🎨 Tailwind CSS Setup - Quick Reference

✅ What Has Been Configured

Your project now has Tailwind CSS v3 fully configured and production-ready!

Files Created/Modified:

  1. tailwind.config.js - Tailwind configuration with custom theme extensions
  2. postcss.config.js - PostCSS configuration for Tailwind processing
  3. src/index.css - Updated with Tailwind directives and utility classes
  4. vite.config.js - Enhanced with production optimizations
  5. package.json - Added build:prod script
  6. .env.example - Environment variables template
  7. PRODUCTION.md - Complete production deployment guide

🚀 Quick Start

1. Install Dependencies (if not already done)

npm install
npm run prepare

2. Development

npm run dev

3. Production Build

npm run build

or

npm run build:prod

4. Preview Production Build

npm run preview

🎯 Key Features

Tailwind CSS v3

  • ✅ Configured with custom theme (colors, animations, fonts)
  • ✅ PurgeCSS enabled (removes unused styles in production)
  • ✅ Custom @layer organization for better specificity control
  • ✅ Full @apply directive support (v3 has better support than v4)
  • ✅ Responsive design built-in
  • ✅ Dark mode ready (can be enabled if needed)
  • ✅ Production-stable and battle-tested

Production Optimizations

  • ✅ Minification: Terser for JS compression
  • ✅ Console Removal: Auto-removes console.logs in production
  • ✅ Code Splitting: Separate chunks for React and Google AI SDK
  • ✅ CSS Optimization: Unused Tailwind classes removed automatically
  • ✅ Source Maps: Disabled for smaller bundle size
  • ✅ Chunk Size Optimization: Configured for optimal loading

Custom Theme Extensions

// Available in your Tailwind config
colors: {
  gradient: {
    purple: '#667eea',
    'purple-dark': '#764ba2',
    pink: '#f093fb',
    red: '#f5576c',
    blue: '#4facfe',
  },
}

animations: {
  float: 'float 6s ease-in-out infinite',
  slideInUp: 'slideInUp 0.5s ease-out',
}

📝 Using Tailwind in Your Code

Option 1: Utility Classes (Recommended)

<div className="flex items-center justify-center p-4 bg-white rounded-lg">
  <h1 className="text-2xl font-bold text-gray-800">Hello World</h1>
</div>

Option 2: @apply Directive in CSS

.my-custom-button {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
  @apply hover:bg-blue-600 transition-colors duration-300;
}

Option 3: Existing Custom Classes

Your existing custom classes (like .glass-card, .welcome-section, etc.) are preserved and work alongside Tailwind!

🎨 Tailwind Utilities Available

Spacing

  • m-{size} - margin
  • p-{size} - padding
  • gap-{size} - gap in flex/grid

Layout

  • flex, grid, block, inline-block
  • items-center, justify-between
  • w-full, h-screen, max-w-lg

Typography

  • text-{size} - font size
  • font-{weight} - font weight
  • text-{color} - text color
  • leading-{height} - line height

Colors

  • bg-{color} - background
  • text-{color} - text
  • border-{color} - border

Effects

  • shadow-{size} - box shadow
  • rounded-{size} - border radius
  • opacity-{amount} - opacity
  • blur-{amount} - backdrop blur

Responsive Design

<div className="w-full md:w-1/2 lg:w-1/3">
  {/* Full width on mobile, half on tablet, third on desktop */}
</div>

Breakpoints:

  • sm: - 640px
  • md: - 768px
  • lg: - 1024px
  • xl: - 1280px
  • 2xl: - 1536px

🔧 Customization

Adding Custom Colors

Edit tailwind.config.js:

theme: {
  extend: {
    colors: {
      'my-color': '#123456',
    }
  }
}

Adding Custom Utilities

In src/index.css:

@layer utilities {
  .my-custom-utility {
    /* your styles */
  }
}

Adding Custom Components

In src/index.css:

@layer components {
  .my-component {
    @apply flex items-center gap-4 p-4;
    /* additional custom styles */
  }
}

📦 Build Output

After running npm run build, you'll get:

dist/
├── index.html
├── assets/
│   ├── index-{hash}.js     # Main bundle (optimized)
│   ├── react-vendor-{hash}.js  # React bundle (cached separately)
│   ├── google-ai-{hash}.js     # Google AI bundle
│   └── index-{hash}.css    # Optimized CSS (purged)

🐛 Troubleshooting

Linter Warnings about @tailwind/@apply

These are expected and can be safely ignored. They're just warnings about Tailwind-specific directives that standard CSS linters don't recognize.

Styles Not Applying

  1. Make sure classes are in the content array in tailwind.config.js
  2. Check if you need to restart the dev server
  3. Ensure index.css is imported in your entry file

Build Errors

  1. Run npm install first
  2. Clear cache: rm -rf node_modules/.vite
  3. Try npm run build again

📚 Resources

🎉 You're All Set!

Your project is now production-ready with Tailwind CSS!

To get started:

npm install   # Install dependencies
npm run dev   # Start development

Happy coding! 🚀