Installation

npm install tailwindcss Add Tailwind to your CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Custom Configuration

Create a tailwind.config.js file:

npx tailwindcss init

Customize your Tailwind configuration:

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Utility Classes

Layout

Container

<div class="container mx-auto">
  <!-- Your content -->
</div>

Centers content and applies default max-widths.

Flexbox

<div class="flex justify-center items-center">
  <!-- Your content -->
</div>

Applies flex display and centers items both horizontally and vertically.

Grid

<div class="grid grid-cols-3 gap-4">
  <!-- Your content -->
</div>

Creates a grid with 3 columns and a gap of 4 units.

Spacing

Padding

<div class="p-4">
  <!-- Your content -->
</div>

Applies padding of 1rem (4 units).

Margin

<div class="m-4">
  <!-- Your content -->
</div>

Applies margin of 1rem (4 units).

Space Between

<div class="flex space-x-4">
  <!-- Your content -->
</div>

Applies horizontal spacing of 1rem (4 units) between flex items.

Sizing

Width

<div class="w-1/2">
  <!-- Your content -->
</div>

Sets the width to 50% of the parent element.

Height

<div class="h-64">
  <!-- Your content -->
</div>

Sets the height to 16rem (64 units).

Typography

Font Weight

<div class="font-bold">
  <!-- Your content -->
</div>

Sets the font weight to bold.

Text Alignment

<div class="text-center">
  <!-- Your content -->
</div>

Centers the text.

Colors

Text Color

<div class="text-blue-500">
  <!-- Your content -->
</div>

Sets the text color to a shade of blue.

Background Color

<div class="bg-red-500">
  <!-- Your content -->
</div>

Sets the background color to a shade of red.

Border Color

<div class="border border-green-500">
  <!-- Your content -->
</div>

Sets the border color to a shade of green.

Borders

Border Radius

<div class="rounded-lg">
  <!-- Your content -->
</div>

Applies large border-radius to the element.

Border Width

<div class="border-4">
  <!-- Your content -->
</div>

Sets the border width to 4 units.

Shadows

Box Shadow

<div class="shadow-lg">
  <!-- Your content -->
</div>

Applies a large box shadow.

Interactivity

Hover

<div class="hover:bg-blue-500">
  <!-- Your content -->
</div>

Changes background color to blue on hover.

Focus

<input class="focus:outline-none">

Removes the outline on focus.

Responsive Design

Breakpoints

Small (sm)

<div class="sm:w-1/2">
  <!-- Your content -->
</div>

Sets the width to 50% on small screens and up.

Medium (md)

<div class="md:text-center">
  <!-- Your content -->
</div>

Centers text on medium screens and up.

Large (lg)

<div class="lg:p-8">
  <!-- Your content -->
</div>

Applies padding of 2rem on large screens and up.

Extra Large (xl)

<div class="xl:flex">
  <!-- Your content -->
</div>

Applies flex display on extra large screens and up.

Customization

Extending Theme

Extend Tailwind's default theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        customColor: '#123456',
      },
    },
  },
}

Adds a custom color to the theme.

Plugins

Add Tailwind plugins:

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

Includes the Tailwind CSS Forms plugin.

Advanced Features

Dark Mode

Enable dark mode:

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

Allows toggling dark mode via a class.

Usage

<html class="dark">
  <body class="bg-white dark:bg-black">
    <!-- Your content -->
  </body>
</html>

Sets up dark mode styles.

Custom Variants

Add custom variants:

module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
}

Adds an active variant for background color.

<button class="bg-blue-500 active:bg-blue-700">
  <!-- Your content -->
</button>

Changes background color on active state.

Tailwind

A reference for Tailwind CSS utility classes and responsive design techniques to quickly style your projects.