Tailwind CSS 1.0 Guide

CSS frameworks force design decisions. Tailwind CSS provides low-level utilities, enabling custom designs without fighting the framework. At ZIRA Software, Tailwind accelerates frontend development while maintaining design uniqueness.

Why Tailwind CSS?

Traditional frameworks (Bootstrap, Foundation):

• Opinionated components
• Requires overriding styles
• Bloated CSS in production
• Limited customization

Tailwind CSS:

• Utility-first approach
• Compose components with classes
• PurgeCSS removes unused styles
• Fully customizable

Installation

With npm:

npm install tailwindcss

# Generate config
npx tailwindcss init

With Laravel:

npm install tailwindcss

# Create config
npx tailwindcss init

# Import in app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1c3d5a',
        'brand-yellow': '#ffc107',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  },
  variants: {},
  plugins: []
}

Utility-First Approach

Traditional CSS:

<style>
.card {
  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

<div class="card">
  <h2 class="card-title">Title</h2>
  <p class="card-content">Content</p>
</div>

Tailwind approach:

<div class="bg-white rounded-lg p-6 shadow-md">
  <h2 class="text-xl font-bold mb-2">Title</h2>
  <p class="text-gray-700">Content</p>
</div>

Common Utilities

Layout:

<!-- Container -->
<div class="container mx-auto px-4">

<!-- Flexbox -->
<div class="flex items-center justify-between">
  <div class="flex-1">Flexible</div>
  <div class="flex-shrink-0">Fixed</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Spacing:

<!-- Padding -->
<div class="p-4">All sides</div>
<div class="px-4 py-2">Horizontal & Vertical</div>
<div class="pt-4 pb-2">Top & Bottom</div>

<!-- Margin -->
<div class="m-4">All sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="mt-8 mb-4">Top & Bottom</div>

Typography:

<h1 class="text-4xl font-bold text-gray-900">Heading</h1>
<p class="text-base text-gray-700 leading-relaxed">
  Paragraph text with good line height.
</p>
<span class="text-sm text-gray-500 uppercase tracking-wide">Small text</span>

Colors:

<!-- Text colors -->
<p class="text-gray-900">Dark text</p>
<p class="text-red-600">Error text</p>
<p class="text-green-500">Success text</p>

<!-- Background colors -->
<div class="bg-blue-500">Blue background</div>
<div class="bg-gradient-to-r from-purple-400 to-pink-600">Gradient</div>

<!-- Border colors -->
<div class="border border-gray-300">With border</div>

Responsive Design

Mobile-first breakpoints:

<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
  <!-- Full width on mobile -->
  <!-- Half width on tablet (md) -->
  <!-- Third width on desktop (lg) -->
  <!-- Quarter width on large desktop (xl) -->
</div>

<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
  Responsive heading
</h1>

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Component Extraction

Reusable components with @apply:

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

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold text-white transition;
  }

  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-600;
  }

  .btn-secondary {
    @apply bg-gray-500 hover:bg-gray-600;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

Usage:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

<div class="card">
  <h3 class="text-xl font-bold mb-4">Card Title</h3>
  <p class="text-gray-700">Card content</p>
</div>

PurgeCSS Optimization

Remove unused styles:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './resources/**/*.blade.php',
      './resources/**/*.js',
      './resources/**/*.vue',
    ],
  },
  theme: {
    // ...
  }
}

Results:

• Development: ~783KB (all utilities)
• Production: ~10-30KB (only used utilities)

Real-World Examples

Navigation:

<nav class="bg-white shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between py-4">
      <div class="text-xl font-bold text-gray-900">
        ZIRA Software
      </div>

      <div class="hidden md:flex space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">Home</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">About</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">Contact</a>
      </div>

      <button class="md:hidden">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

Card grid:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
  <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
    <img src="image.jpg" alt="Product" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="text-xl font-bold mb-2">Product Title</h3>
      <p class="text-gray-700 mb-4">Product description goes here.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-blue-600">$99.99</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
</div>

Form:

<form class="max-w-lg mx-auto p-6 bg-white rounded-lg shadow-md">
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="email">
      Email
    </label>
    <input
      type="email"
      id="email"
      class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
      placeholder="you@example.com"
    >
  </div>

  <div class="mb-6">
    <label class="block text-gray-700 font-bold mb-2" for="password">
      Password
    </label>
    <input
      type="password"
      id="password"
      class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
    >
  </div>

  <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition">
    Sign In
  </button>
</form>

Dark Mode

Configure:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
  // ...
}

Usage:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Content that adapts to dark mode
</div>

Plugins

Official plugins:

npm install @tailwindcss/forms @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Conclusion

Tailwind CSS 1.0 revolutionizes utility-first styling. Rapid development without design constraints, tiny production builds with PurgeCSS.

Need frontend development assistance? Contact ZIRA Software for modern web design services.