Cara Install dan Konfigurasi Tailwind CSS

Tailwind CSS adalah utility-first CSS framework yang sangat populer. Berikut cara install dan konfigurasinya.

Installing Tailwind CSS

Via npm

# Install Tailwind and dependencies
npm install -D tailwindcss postcss autoprefixer

# Initialize config files
npx tailwindcss init -p

Generated Files

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx,html}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Configure Content Paths

For Different Frameworks

// React/Next.js
content: [
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
  "./app/**/*.{js,ts,jsx,tsx}",
],

// Vue.js
content: [
  "./index.html",
  "./src/**/*.{vue,js,ts,jsx,tsx}",
],

Add Tailwind Directives

In CSS File

/* src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Using Tailwind Classes

Basic Usage

<div class="bg-blue-500 text-white p-4 rounded-lg">
  <h1 class="text-2xl font-bold">Hello World</h1>
  <p class="mt-2 text-gray-100">Welcome to Tailwind CSS</p>
</div>

Responsive Design

<div class="p-4 md:p-8 lg:p-12">
  <h1 class="text-xl md:text-2xl lg:text-4xl">Responsive Title</h1>
</div>

Hover and Focus States

<button
  class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300
               text-white font-bold py-2 px-4 rounded transition-colors"
>
  Click Me
</button>

Customizing Theme

Extend Colors

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#f0f9ff",
          500: "#0ea5e9",
          900: "#0c4a6e",
        },
      },
    },
  },
};

Custom Fonts

theme: {
  extend: {
    fontFamily: {
      'sans': ['Inter', 'sans-serif'],
      'display': ['Poppins', 'sans-serif'],
    },
  },
}

Using @apply

Creating Component Classes

/* styles/components.css */
@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded
           hover:bg-blue-700 transition-colors;
  }

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

Dark Mode

Enable Dark Mode

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

Using Dark Mode

<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-900 dark:text-white">This adapts to dark mode</p>
</div>

Production Build

Purge Unused CSS

# Build for production (automatically purges)
npm run build

# CSS size reduced significantly

Kesimpulan

Tailwind CSS menyediakan approach utility-first yang memungkinkan rapid UI development tanpa leaving HTML.