Tailwind CSS & Laravel Guide

Tailwind CSS offers a different approach to styling—utility classes instead of custom CSS. This utility-first methodology speeds up development while maintaining consistency. At ZIRA Software, Tailwind has become our default styling solution for Laravel projects.

Why Utility-First?

Traditional CSS              Tailwind CSS
├── Write custom CSS         ├── Compose utilities
├── Name everything          ├── No naming needed
├── Maintain stylesheets     ├── Delete unused
├── Context switching        ├── Style in markup
└── CSS grows over time      └── CSS stays small

Installation with Laravel Mix

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

// webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       require('tailwindcss'),
       require('autoprefixer'),
   ]);

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

Tailwind Configuration

// tailwind.config.js
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Basic Usage

<!-- Traditional approach -->
<style>
.card { background: white; border-radius: 8px; padding: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card-title { font-size: 18px; font-weight: 600; color: #1a202c; }
</style>
<div class="card">
    <h2 class="card-title">Hello</h2>
</div>

<!-- Tailwind approach -->
<div class="bg-white rounded-lg p-6 shadow">
    <h2 class="text-lg font-semibold text-gray-900">Hello</h2>
</div>

Responsive Design

<!-- Mobile-first responsive -->
<div class="
    w-full          /* Mobile: full width */
    md:w-1/2        /* Tablet: half width */
    lg:w-1/3        /* Desktop: third width */
    p-4
    md:p-6
    lg:p-8
">
    Content
</div>

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="bg-white p-4 rounded">Card 1</div>
    <div class="bg-white p-4 rounded">Card 2</div>
    <div class="bg-white p-4 rounded">Card 3</div>
    <div class="bg-white p-4 rounded">Card 4</div>
</div>

Component Patterns

<!-- Button component -->
<button class="
    inline-flex items-center
    px-4 py-2
    bg-primary-600 hover:bg-primary-700
    text-white font-medium
    rounded-md
    transition-colors duration-200
    focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
">
    Save Changes
</button>

<!-- Card component -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="/image.jpg" alt="" class="w-full h-48 object-cover">
    <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-900">Card Title</h3>
        <p class="mt-2 text-gray-600">Card description goes here.</p>
        <a href="#" class="mt-4 inline-block text-primary-600 hover:text-primary-700">
            Learn more →
        </a>
    </div>
</div>

<!-- Form input -->
<input type="text" class="
    w-full
    px-3 py-2
    border border-gray-300 rounded-md
    focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500
    placeholder-gray-400
">

Extracting Components

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

@layer components {
    .btn {
        @apply inline-flex items-center px-4 py-2 font-medium rounded-md transition-colors duration-200;
    }

    .btn-primary {
        @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
    }

    .btn-secondary {
        @apply bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500;
    }

    .input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
    }
}

<!-- Usage -->
<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>
<input type="text" class="input" placeholder="Enter name">

Blade Component

{{-- resources/views/components/button.blade.php --}}
@props([
    'variant' => 'primary',
    'size' => 'md',
])

@php
$variants = [
    'primary' => 'bg-primary-600 text-white hover:bg-primary-700',
    'secondary' => 'bg-gray-100 text-gray-900 hover:bg-gray-200',
    'danger' => 'bg-red-600 text-white hover:bg-red-700',
];

$sizes = [
    'sm' => 'px-3 py-1.5 text-sm',
    'md' => 'px-4 py-2 text-base',
    'lg' => 'px-6 py-3 text-lg',
];
@endphp

<button {{ $attributes->merge([
    'class' => "inline-flex items-center font-medium rounded-md transition-colors {$variants[$variant]} {$sizes[$size]}"
]) }}>
    {{ $slot }}
</button>

<!-- Usage -->
<x-button>Default Button</x-button>
<x-button variant="secondary" size="sm">Small Secondary</x-button>
<x-button variant="danger" size="lg">Large Danger</x-button>

Conclusion

Tailwind CSS transforms how we write styles. Utility classes eliminate naming decisions, reduce CSS bloat, and accelerate development. Combined with Laravel Blade components, it creates a powerful, maintainable styling system.

Need Tailwind CSS development? Contact ZIRA Software for frontend assistance.