Tailwind CSS

Language: JavaScript

CSS Framework

Tailwind CSS was created by Adam Wathan and released in 2017. It was designed to avoid opinionated component styles and encourage developers to compose custom designs using utility classes. Its approach promotes consistency, reduces CSS bloat, and enables highly responsive, adaptive layouts.

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML. It emphasizes rapid development, responsive design, and maintainable styles.

Installation

npm: npm install tailwindcss postcss autoprefixer

yarn: yarn add tailwindcss postcss autoprefixer

manual: Include Tailwind via CDN or configure PostCSS in your project and import Tailwind directives in your CSS file.

Usage

Tailwind provides a set of utility classes for styling elements directly in HTML. Utilities cover layout, spacing, typography, colors, flexbox, grid, shadows, and more. It supports responsive design, variants, and custom theming.

Simple button

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Click Me</button>

Creates a button with blue background, white text, padding, rounded corners, and a hover effect.

Responsive text

<p class="text-sm md:text-lg lg:text-xl">Responsive Text</p>

Changes font size based on screen size using responsive classes (small, medium, large).

Flexbox layout

<div class="flex justify-between items-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Creates a horizontal flex container with items spaced evenly and vertically centered.

Grid layout

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

Creates a three-column grid with spacing between columns using Tailwind’s grid utilities.

Custom colors and theming

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { customBlue: '#1E40AF' }
    }
  }
}

Extends Tailwind’s default color palette with a custom color for use in utility classes.

Hover and focus states

<input class="border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 rounded px-2 py-1" />

Styles an input with border, rounded corners, and focus ring effect.

Error Handling

Styles not applied: Ensure Tailwind CSS is imported correctly and PostCSS is configured if using build tools.

Hover/focus variants not working: Check that variants are enabled in tailwind.config.js and classes are applied correctly.

Responsive classes not applied: Ensure the responsive breakpoints are configured correctly and match HTML structure.

Best Practices

Use Tailwind’s utility classes instead of writing custom CSS for consistency.

Leverage responsive variants for mobile-first design.

Use Tailwind configuration to define custom themes and colors.

Combine utilities into reusable components with @apply in CSS if needed.

Use PurgeCSS or the built-in content option to remove unused styles for smaller bundles.

Official Docs Github