Tailwind CSS Cheatsheet¶

Tailwind CSS - Rapidly Build Modern Websites

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Table of Contents¶

Installation
Configuration
Core Concepts
Layout
Flexbox & Grid
Spacing
Sizing
Typography
Backgrounds
Borders
Effects
Filters
Tables
Transitions & Animation
Transforms
Interactivity
SVG
Accessibility
Responsive Design
Dark Mode
Customization
Components
Best Practices

Installation¶

CDN (Quick Start)¶

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Install via npm¶

# Install Tailwind CSS
npm install -D tailwindcss

# Initialize Tailwind CSS
npx tailwindcss init

# Install with PostCSS and Autoprefixer
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Vite Setup¶

# Create Vite project
npm create vite@latest my-project
cd my-project

# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

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

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Next.js Setup¶

# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

Configuration¶

Basic Configuration¶

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    },
  },
  plugins: [],
}

Advanced Configuration¶

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class', // or 'media'
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(100%)' },
          '100%': { transform: 'translateY(0)' },
        }
      }
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

Core Concepts¶

Utility-First Fundamentals¶

<!-- Traditional CSS -->
<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }
</style>

<!-- Tailwind CSS -->
<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
  </div>
</div>

Hover, Focus, and Other States¶

<!-- Hover states -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

<!-- Focus states -->
<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded px-3 py-2">

<!-- Active states -->
<button class="bg-blue-500 active:bg-blue-800 text-white px-4 py-2 rounded">
  Click me
</button>

<!-- Group hover -->
<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent">
  <p class="text-indigo-600 group-hover:text-gray-900">New Project</p>
  <p class="text-indigo-500 group-hover:text-gray-500">Create a new project from a variety of starting templates.</p>
</div>

Responsive Modifiers¶

<!-- Responsive design -->
<img class="w-16 md:w-32 lg:w-48" src="...">

<!-- Mobile first approach -->
<div class="text-center sm:text-left md:text-right lg:text-center">
  Responsive text alignment
</div>

Layout¶

Container¶

<!-- Container -->
<div class="container mx-auto">
  <!-- Content -->
</div>

<!-- Max-width containers -->
<div class="max-w-sm mx-auto">Small container</div>
<div class="max-w-md mx-auto">Medium container</div>
<div class="max-w-lg mx-auto">Large container</div>
<div class="max-w-xl mx-auto">Extra large container</div>
<div class="max-w-2xl mx-auto">2XL container</div>

Box Sizing¶

<!-- Box sizing -->
<div class="box-border">box-border</div>
<div class="box-content">box-content</div>

Display¶

<!-- Display utilities -->
<div class="block">block</div>
<div class="inline-block">inline-block</div>
<div class="inline">inline</div>
<div class="flex">flex</div>
<div class="inline-flex">inline-flex</div>
<div class="table">table</div>
<div class="grid">grid</div>
<div class="hidden">hidden</div>

Floats¶

<!-- Float utilities -->
<img class="float-left" src="...">
<img class="float-right" src="...">
<div class="clear-left">clear-left</div>
<div class="clear-right">clear-right</div>
<div class="clear-both">clear-both</div>

Clear¶

<!-- Clear utilities -->
<div class="clear-left">clear-left</div>
<div class="clear-right">clear-right</div>
<div class="clear-both">clear-both</div>
<div class="clear-none">clear-none</div>

Object Fit¶

<!-- Object fit -->
<img class="object-contain" src="...">
<img class="object-cover" src="...">
<img class="object-fill" src="...">
<img class="object-none" src="...">
<img class="object-scale-down" src="...">

Object Position¶

<!-- Object position -->
<img class="object-bottom" src="...">
<img class="object-center" src="...">
<img class="object-left" src="...">
<img class="object-left-bottom" src="...">
<img class="object-left-top" src="...">
<img class="object-right" src="...">
<img class="object-right-bottom" src="...">
<img class="object-right-top" src="...">
<img class="object-top" src="...">

Overflow¶

<!-- Overflow -->
<div class="overflow-auto">overflow-auto</div>
<div class="overflow-hidden">overflow-hidden</div>
<div class="overflow-visible">overflow-visible</div>
<div class="overflow-scroll">overflow-scroll</div>
<div class="overflow-x-auto">overflow-x-auto</div>
<div class="overflow-y-auto">overflow-y-auto</div>

Position¶

<!-- Position -->
<div class="static">static</div>
<div class="fixed">fixed</div>
<div class="absolute">absolute</div>
<div class="relative">relative</div>
<div class="sticky">sticky</div>

Top / Right / Bottom / Left¶

<!-- Positioning -->
<div class="absolute top-0 left-0">top-0 left-0</div>
<div class="absolute top-0 right-0">top-0 right-0</div>
<div class="absolute bottom-0 left-0">bottom-0 left-0</div>
<div class="absolute bottom-0 right-0">bottom-0 right-0</div>
<div class="absolute inset-0">inset-0</div>
<div class="absolute inset-x-0">inset-x-0</div>
<div class="absolute inset-y-0">inset-y-0</div>

Visibility¶

<!-- Visibility -->
<div class="visible">visible</div>
<div class="invisible">invisible</div>

Z-Index¶

<!-- Z-index -->
<div class="z-0">z-0</div>
<div class="z-10">z-10</div>
<div class="z-20">z-20</div>
<div class="z-30">z-30</div>
<div class="z-40">z-40</div>
<div class="z-50">z-50</div>
<div class="z-auto">z-auto</div>

Flexbox & Grid¶

Flex Direction¶

<!-- Flex direction -->
<div class="flex flex-row">flex-row</div>
<div class="flex flex-row-reverse">flex-row-reverse</div>
<div class="flex flex-col">flex-col</div>
<div class="flex flex-col-reverse">flex-col-reverse</div>

Flex Wrap¶

<!-- Flex wrap -->
<div class="flex flex-wrap">flex-wrap</div>
<div class="flex flex-wrap-reverse">flex-wrap-reverse</div>
<div class="flex flex-nowrap">flex-nowrap</div>

Flex¶

<!-- Flex -->
<div class="flex-1">flex-1</div>
<div class="flex-auto">flex-auto</div>
<div class="flex-initial">flex-initial</div>
<div class="flex-none">flex-none</div>

Flex Grow¶

<!-- Flex grow -->
<div class="flex-grow">flex-grow</div>
<div class="flex-grow-0">flex-grow-0</div>

Flex Shrink¶

<!-- Flex shrink -->
<div class="flex-shrink">flex-shrink</div>
<div class="flex-shrink-0">flex-shrink-0</div>

Order¶

<!-- Order -->
<div class="order-1">order-1</div>
<div class="order-2">order-2</div>
<div class="order-3">order-3</div>
<div class="order-first">order-first</div>
<div class="order-last">order-last</div>
<div class="order-none">order-none</div>

Grid Template Columns¶

<!-- Grid template columns -->
<div class="grid grid-cols-1">grid-cols-1</div>
<div class="grid grid-cols-2">grid-cols-2</div>
<div class="grid grid-cols-3">grid-cols-3</div>
<div class="grid grid-cols-4">grid-cols-4</div>
<div class="grid grid-cols-5">grid-cols-5</div>
<div class="grid grid-cols-6">grid-cols-6</div>
<div class="grid grid-cols-12">grid-cols-12</div>
<div class="grid grid-cols-none">grid-cols-none</div>

Grid Column Start / End¶

<!-- Grid column start/end -->
<div class="col-auto">col-auto</div>
<div class="col-span-1">col-span-1</div>
<div class="col-span-2">col-span-2</div>
<div class="col-span-3">col-span-3</div>
<div class="col-start-1">col-start-1</div>
<div class="col-start-2">col-start-2</div>
<div class="col-end-1">col-end-1</div>
<div class="col-end-2">col-end-2</div>

Grid Template Rows¶

<!-- Grid template rows -->
<div class="grid grid-rows-1">grid-rows-1</div>
<div class="grid grid-rows-2">grid-rows-2</div>
<div class="grid grid-rows-3">grid-rows-3</div>
<div class="grid grid-rows-4">grid-rows-4</div>
<div class="grid grid-rows-5">grid-rows-5</div>
<div class="grid grid-rows-6">grid-rows-6</div>
<div class="grid grid-rows-none">grid-rows-none</div>

Grid Row Start / End¶

<!-- Grid row start/end -->
<div class="row-auto">row-auto</div>
<div class="row-span-1">row-span-1</div>
<div class="row-span-2">row-span-2</div>
<div class="row-span-3">row-span-3</div>
<div class="row-start-1">row-start-1</div>
<div class="row-start-2">row-start-2</div>
<div class="row-end-1">row-end-1</div>
<div class="row-end-2">row-end-2</div>

Gap¶

<!-- Gap -->
<div class="grid gap-0">gap-0</div>
<div class="grid gap-1">gap-1</div>
<div class="grid gap-2">gap-2</div>
<div class="grid gap-4">gap-4</div>
<div class="grid gap-8">gap-8</div>
<div class="grid gap-x-4">gap-x-4</div>
<div class="grid gap-y-4">gap-y-4</div>

Justify Content¶

<!-- Justify content -->
<div class="flex justify-start">justify-start</div>
<div class="flex justify-end">justify-end</div>
<div class="flex justify-center">justify-center</div>
<div class="flex justify-between">justify-between</div>
<div class="flex justify-around">justify-around</div>
<div class="flex justify-evenly">justify-evenly</div>

Justify Items¶

<!-- Justify items -->
<div class="grid justify-items-start">justify-items-start</div>
<div class="grid justify-items-end">justify-items-end</div>
<div class="grid justify-items-center">justify-items-center</div>
<div class="grid justify-items-stretch">justify-items-stretch</div>

Justify Self¶

<!-- Justify self -->
<div class="justify-self-auto">justify-self-auto</div>
<div class="justify-self-start">justify-self-start</div>
<div class="justify-self-end">justify-self-end</div>
<div class="justify-self-center">justify-self-center</div>
<div class="justify-self-stretch">justify-self-stretch</div>

Align Content¶

<!-- Align content -->
<div class="flex flex-wrap align-content-start">align-content-start</div>
<div class="flex flex-wrap align-content-end">align-content-end</div>
<div class="flex flex-wrap align-content-center">align-content-center</div>
<div class="flex flex-wrap align-content-between">align-content-between</div>
<div class="flex flex-wrap align-content-around">align-content-around</div>
<div class="flex flex-wrap align-content-evenly">align-content-evenly</div>

Align Items¶

<!-- Align items -->
<div class="flex items-start">items-start</div>
<div class="flex items-end">items-end</div>
<div class="flex items-center">items-center</div>
<div class="flex items-baseline">items-baseline</div>
<div class="flex items-stretch">items-stretch</div>

Align Self¶

<!-- Align self -->
<div class="self-auto">self-auto</div>
<div class="self-start">self-start</div>
<div class="self-end">self-end</div>
<div class="self-center">self-center</div>
<div class="self-stretch">self-stretch</div>
<div class="self-baseline">self-baseline</div>

Place Content¶

<!-- Place content -->
<div class="grid place-content-center">place-content-center</div>
<div class="grid place-content-start">place-content-start</div>
<div class="grid place-content-end">place-content-end</div>
<div class="grid place-content-between">place-content-between</div>
<div class="grid place-content-around">place-content-around</div>
<div class="grid place-content-evenly">place-content-evenly</div>
<div class="grid place-content-stretch">place-content-stretch</div>

Place Items¶

<!-- Place items -->
<div class="grid place-items-start">place-items-start</div>
<div class="grid place-items-end">place-items-end</div>
<div class="grid place-items-center">place-items-center</div>
<div class="grid place-items-stretch">place-items-stretch</div>

Place Self¶

<!-- Place self -->
<div class="place-self-auto">place-self-auto</div>
<div class="place-self-start">place-self-start</div>
<div class="place-self-end">place-self-end</div>
<div class="place-self-center">place-self-center</div>
<div class="place-self-stretch">place-self-stretch</div>

Spacing¶

Padding¶

<!-- Padding -->
<div class="p-0">p-0</div>
<div class="p-1">p-1</div>
<div class="p-2">p-2</div>
<div class="p-3">p-3</div>
<div class="p-4">p-4</div>
<div class="p-5">p-5</div>
<div class="p-6">p-6</div>
<div class="p-8">p-8</div>
<div class="p-10">p-10</div>
<div class="p-12">p-12</div>
<div class="p-16">p-16</div>
<div class="p-20">p-20</div>
<div class="p-24">p-24</div>
<div class="p-32">p-32</div>
<div class="p-40">p-40</div>
<div class="p-48">p-48</div>
<div class="p-56">p-56</div>
<div class="p-64">p-64</div>

<!-- Directional padding -->
<div class="pt-4">pt-4</div>
<div class="pr-4">pr-4</div>
<div class="pb-4">pb-4</div>
<div class="pl-4">pl-4</div>
<div class="px-4">px-4</div>
<div class="py-4">py-4</div>

Margin¶

<!-- Margin -->
<div class="m-0">m-0</div>
<div class="m-1">m-1</div>
<div class="m-2">m-2</div>
<div class="m-3">m-3</div>
<div class="m-4">m-4</div>
<div class="m-5">m-5</div>
<div class="m-6">m-6</div>
<div class="m-8">m-8</div>
<div class="m-10">m-10</div>
<div class="m-12">m-12</div>
<div class="m-16">m-16</div>
<div class="m-20">m-20</div>
<div class="m-24">m-24</div>
<div class="m-32">m-32</div>
<div class="m-40">m-40</div>
<div class="m-48">m-48</div>
<div class="m-56">m-56</div>
<div class="m-64">m-64</div>
<div class="m-auto">m-auto</div>

<!-- Directional margin -->
<div class="mt-4">mt-4</div>
<div class="mr-4">mr-4</div>
<div class="mb-4">mb-4</div>
<div class="ml-4">ml-4</div>
<div class="mx-4">mx-4</div>
<div class="my-4">my-4</div>

<!-- Negative margin -->
<div class="-m-1">-m-1</div>
<div class="-mt-1">-mt-1</div>
<div class="-mr-1">-mr-1</div>
<div class="-mb-1">-mb-1</div>
<div class="-ml-1">-ml-1</div>
<div class="-mx-1">-mx-1</div>
<div class="-my-1">-my-1</div>

Space Between¶

<!-- Space between -->
<div class="flex space-x-1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="flex flex-col space-y-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Reverse space -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Sizing¶

Width¶

<!-- Width -->
<div class="w-0">w-0</div>
<div class="w-1">w-1</div>
<div class="w-2">w-2</div>
<div class="w-3">w-3</div>
<div class="w-4">w-4</div>
<div class="w-5">w-5</div>
<div class="w-6">w-6</div>
<div class="w-8">w-8</div>
<div class="w-10">w-10</div>
<div class="w-12">w-12</div>
<div class="w-16">w-16</div>
<div class="w-20">w-20</div>
<div class="w-24">w-24</div>
<div class="w-32">w-32</div>
<div class="w-40">w-40</div>
<div class="w-48">w-48</div>
<div class="w-56">w-56</div>
<div class="w-64">w-64</div>
<div class="w-auto">w-auto</div>

<!-- Fractional widths -->
<div class="w-1/2">w-1/2</div>
<div class="w-1/3">w-1/3</div>
<div class="w-2/3">w-2/3</div>
<div class="w-1/4">w-1/4</div>
<div class="w-2/4">w-2/4</div>
<div class="w-3/4">w-3/4</div>
<div class="w-1/5">w-1/5</div>
<div class="w-2/5">w-2/5</div>
<div class="w-3/5">w-3/5</div>
<div class="w-4/5">w-4/5</div>
<div class="w-1/6">w-1/6</div>
<div class="w-2/6">w-2/6</div>
<div class="w-3/6">w-3/6</div>
<div class="w-4/6">w-4/6</div>
<div class="w-5/6">w-5/6</div>
<div class="w-1/12">w-1/12</div>
<div class="w-2/12">w-2/12</div>
<div class="w-3/12">w-3/12</div>
<div class="w-4/12">w-4/12</div>
<div class="w-5/12">w-5/12</div>
<div class="w-6/12">w-6/12</div>
<div class="w-7/12">w-7/12</div>
<div class="w-8/12">w-8/12</div>
<div class="w-9/12">w-9/12</div>
<div class="w-10/12">w-10/12</div>
<div class="w-11/12">w-11/12</div>
<div class="w-full">w-full</div>

<!-- Viewport widths -->
<div class="w-screen">w-screen</div>
<div class="w-min">w-min</div>
<div class="w-max">w-max</div>
<div class="w-fit">w-fit</div>

Min-Width¶

<!-- Min-width -->
<div class="min-w-0">min-w-0</div>
<div class="min-w-full">min-w-full</div>
<div class="min-w-min">min-w-min</div>
<div class="min-w-max">min-w-max</div>
<div class="min-w-fit">min-w-fit</div>

Max-Width¶

<!-- Max-width -->
<div class="max-w-0">max-w-0</div>
<div class="max-w-none">max-w-none</div>
<div class="max-w-xs">max-w-xs</div>
<div class="max-w-sm">max-w-sm</div>
<div class="max-w-md">max-w-md</div>
<div class="max-w-lg">max-w-lg</div>
<div class="max-w-xl">max-w-xl</div>
<div class="max-w-2xl">max-w-2xl</div>
<div class="max-w-3xl">max-w-3xl</div>
<div class="max-w-4xl">max-w-4xl</div>
<div class="max-w-5xl">max-w-5xl</div>
<div class="max-w-6xl">max-w-6xl</div>
<div class="max-w-7xl">max-w-7xl</div>
<div class="max-w-full">max-w-full</div>
<div class="max-w-min">max-w-min</div>
<div class="max-w-max">max-w-max</div>
<div class="max-w-fit">max-w-fit</div>
<div class="max-w-prose">max-w-prose</div>
<div class="max-w-screen-sm">max-w-screen-sm</div>
<div class="max-w-screen-md">max-w-screen-md</div>
<div class="max-w-screen-lg">max-w-screen-lg</div>
<div class="max-w-screen-xl">max-w-screen-xl</div>
<div class="max-w-screen-2xl">max-w-screen-2xl</div>

Height¶

<!-- Height -->
<div class="h-0">h-0</div>
<div class="h-1">h-1</div>
<div class="h-2">h-2</div>
<div class="h-3">h-3</div>
<div class="h-4">h-4</div>
<div class="h-5">h-5</div>
<div class="h-6">h-6</div>
<div class="h-8">h-8</div>
<div class="h-10">h-10</div>
<div class="h-12">h-12</div>
<div class="h-16">h-16</div>
<div class="h-20">h-20</div>
<div class="h-24">h-24</div>
<div class="h-32">h-32</div>
<div class="h-40">h-40</div>
<div class="h-48">h-48</div>
<div class="h-56">h-56</div>
<div class="h-64">h-64</div>
<div class="h-auto">h-auto</div>

<!-- Fractional heights -->
<div class="h-1/2">h-1/2</div>
<div class="h-1/3">h-1/3</div>
<div class="h-2/3">h-2/3</div>
<div class="h-1/4">h-1/4</div>
<div class="h-2/4">h-2/4</div>
<div class="h-3/4">h-3/4</div>
<div class="h-1/5">h-1/5</div>
<div class="h-2/5">h-2/5</div>
<div class="h-3/5">h-3/5</div>
<div class="h-4/5">h-4/5</div>
<div class="h-1/6">h-1/6</div>
<div class="h-2/6">h-2/6</div>
<div class="h-3/6">h-3/6</div>
<div class="h-4/6">h-4/6</div>
<div class="h-5/6">h-5/6</div>
<div class="h-full">h-full</div>

<!-- Viewport heights -->
<div class="h-screen">h-screen</div>
<div class="h-min">h-min</div>
<div class="h-max">h-max</div>
<div class="h-fit">h-fit</div>

Min-Height¶

<!-- Min-height -->
<div class="min-h-0">min-h-0</div>
<div class="min-h-full">min-h-full</div>
<div class="min-h-screen">min-h-screen</div>
<div class="min-h-min">min-h-min</div>
<div class="min-h-max">min-h-max</div>
<div class="min-h-fit">min-h-fit</div>

Max-Height¶

<!-- Max-height -->
<div class="max-h-0">max-h-0</div>
<div class="max-h-1">max-h-1</div>
<div class="max-h-2">max-h-2</div>
<div class="max-h-3">max-h-3</div>
<div class="max-h-4">max-h-4</div>
<div class="max-h-5">max-h-5</div>
<div class="max-h-6">max-h-6</div>
<div class="max-h-full">max-h-full</div>
<div class="max-h-screen">max-h-screen</div>
<div class="max-h-min">max-h-min</div>
<div class="max-h-max">max-h-max</div>
<div class="max-h-fit">max-h-fit</div>

Typography¶

Font Family¶

<!-- Font family -->
<p class="font-sans">font-sans</p>
<p class="font-serif">font-serif</p>
<p class="font-mono">font-mono</p>

Font Size¶

<!-- Font size -->
<p class="text-xs">text-xs</p>
<p class="text-sm">text-sm</p>
<p class="text-base">text-base</p>
<p class="text-lg">text-lg</p>
<p class="text-xl">text-xl</p>
<p class="text-2xl">text-2xl</p>
<p class="text-3xl">text-3xl</p>
<p class="text-4xl">text-4xl</p>
<p class="text-5xl">text-5xl</p>
<p class="text-6xl">text-6xl</p>
<p class="text-7xl">text-7xl</p>
<p class="text-8xl">text-8xl</p>
<p class="text-9xl">text-9xl</p>

Font Smoothing¶

<!-- Font smoothing -->
<p class="antialiased">antialiased</p>
<p class="subpixel-antialiased">subpixel-antialiased</p>

Font Style¶

<!-- Font style -->
<p class="italic">italic</p>
<p class="not-italic">not-italic</p>

Font Weight¶

<!-- Font weight -->
<p class="font-thin">font-thin</p>
<p class="font-extralight">font-extralight</p>
<p class="font-light">font-light</p>
<p class="font-normal">font-normal</p>
<p class="font-medium">font-medium</p>
<p class="font-semibold">font-semibold</p>
<p class="font-bold">font-bold</p>
<p class="font-extrabold">font-extrabold</p>
<p class="font-black">font-black</p>

Font Variant Numeric¶

<!-- Font variant numeric -->
<p class="normal-nums">normal-nums</p>
<p class="ordinal">ordinal</p>
<p class="slashed-zero">slashed-zero</p>
<p class="lining-nums">lining-nums</p>
<p class="oldstyle-nums">oldstyle-nums</p>
<p class="proportional-nums">proportional-nums</p>
<p class="tabular-nums">tabular-nums</p>
<p class="diagonal-fractions">diagonal-fractions</p>
<p class="stacked-fractions">stacked-fractions</p>

Letter Spacing¶

<!-- Letter spacing -->
<p class="tracking-tighter">tracking-tighter</p>
<p class="tracking-tight">tracking-tight</p>
<p class="tracking-normal">tracking-normal</p>
<p class="tracking-wide">tracking-wide</p>
<p class="tracking-wider">tracking-wider</p>
<p class="tracking-widest">tracking-widest</p>

Line Height¶

<!-- Line height -->
<p class="leading-3">leading-3</p>
<p class="leading-4">leading-4</p>
<p class="leading-5">leading-5</p>
<p class="leading-6">leading-6</p>
<p class="leading-7">leading-7</p>
<p class="leading-8">leading-8</p>
<p class="leading-9">leading-9</p>
<p class="leading-10">leading-10</p>
<p class="leading-none">leading-none</p>
<p class="leading-tight">leading-tight</p>
<p class="leading-snug">leading-snug</p>
<p class="leading-normal">leading-normal</p>
<p class="leading-relaxed">leading-relaxed</p>
<p class="leading-loose">leading-loose</p>

List Style Type¶

<!-- List style type -->
<ul class="list-none">
  <li>list-none</li>
</ul>
<ul class="list-disc">
  <li>list-disc</li>
</ul>
<ul class="list-decimal">
  <li>list-decimal</li>
</ul>

List Style Position¶

<!-- List style position -->
<ul class="list-inside">
  <li>list-inside</li>
</ul>
<ul class="list-outside">
  <li>list-outside</li>
</ul>

Text Align¶

<!-- Text align -->
<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>
<p class="text-justify">text-justify</p>
<p class="text-start">text-start</p>
<p class="text-end">text-end</p>

Text Color¶

<!-- Text color -->
<p class="text-inherit">text-inherit</p>
<p class="text-current">text-current</p>
<p class="text-transparent">text-transparent</p>
<p class="text-black">text-black</p>
<p class="text-white">text-white</p>
<p class="text-slate-50">text-slate-50</p>
<p class="text-slate-100">text-slate-100</p>
<p class="text-slate-200">text-slate-200</p>
<p class="text-slate-300">text-slate-300</p>
<p class="text-slate-400">text-slate-400</p>
<p class="text-slate-500">text-slate-500</p>
<p class="text-slate-600">text-slate-600</p>
<p class="text-slate-700">text-slate-700</p>
<p class="text-slate-800">text-slate-800</p>
<p class="text-slate-900">text-slate-900</p>
<p class="text-slate-950">text-slate-950</p>

Text Decoration¶

<!-- Text decoration -->
<p class="underline">underline</p>
<p class="overline">overline</p>
<p class="line-through">line-through</p>
<p class="no-underline">no-underline</p>

Text Decoration Color¶

<!-- Text decoration color -->
<p class="underline decoration-inherit">decoration-inherit</p>
<p class="underline decoration-current">decoration-current</p>
<p class="underline decoration-transparent">decoration-transparent</p>
<p class="underline decoration-black">decoration-black</p>
<p class="underline decoration-white">decoration-white</p>

Text Decoration Style¶

<!-- Text decoration style -->
<p class="underline decoration-solid">decoration-solid</p>
<p class="underline decoration-double">decoration-double</p>
<p class="underline decoration-dotted">decoration-dotted</p>
<p class="underline decoration-dashed">decoration-dashed</p>
<p class="underline decoration-wavy">decoration-wavy</p>

Text Decoration Thickness¶

<!-- Text decoration thickness -->
<p class="underline decoration-auto">decoration-auto</p>
<p class="underline decoration-from-font">decoration-from-font</p>
<p class="underline decoration-0">decoration-0</p>
<p class="underline decoration-1">decoration-1</p>
<p class="underline decoration-2">decoration-2</p>
<p class="underline decoration-4">decoration-4</p>
<p class="underline decoration-8">decoration-8</p>

Text Underline Offset¶

<!-- Text underline offset -->
<p class="underline underline-offset-auto">underline-offset-auto</p>
<p class="underline underline-offset-0">underline-offset-0</p>
<p class="underline underline-offset-1">underline-offset-1</p>
<p class="underline underline-offset-2">underline-offset-2</p>
<p class="underline underline-offset-4">underline-offset-4</p>
<p class="underline underline-offset-8">underline-offset-8</p>

Text Transform¶

<!-- Text transform -->
<p class="uppercase">uppercase</p>
<p class="lowercase">lowercase</p>
<p class="capitalize">capitalize</p>
<p class="normal-case">normal-case</p>

Text Overflow¶

<!-- Text overflow -->
<p class="truncate">truncate</p>
<p class="text-ellipsis overflow-hidden">text-ellipsis</p>
<p class="text-clip overflow-hidden">text-clip</p>

Text Indent¶

<!-- Text indent -->
<p class="indent-0">indent-0</p>
<p class="indent-1">indent-1</p>
<p class="indent-2">indent-2</p>
<p class="indent-4">indent-4</p>
<p class="indent-8">indent-8</p>

Vertical Align¶

<!-- Vertical align -->
<span class="align-baseline">align-baseline</span>
<span class="align-top">align-top</span>
<span class="align-middle">align-middle</span>
<span class="align-bottom">align-bottom</span>
<span class="align-text-top">align-text-top</span>
<span class="align-text-bottom">align-text-bottom</span>
<span class="align-sub">align-sub</span>
<span class="align-super">align-super</span>

Whitespace¶

<!-- Whitespace -->
<p class="whitespace-normal">whitespace-normal</p>
<p class="whitespace-nowrap">whitespace-nowrap</p>
<p class="whitespace-pre">whitespace-pre</p>
<p class="whitespace-pre-line">whitespace-pre-line</p>
<p class="whitespace-pre-wrap">whitespace-pre-wrap</p>

Word Break¶

<!-- Word break -->
<p class="break-normal">break-normal</p>
<p class="break-words">break-words</p>
<p class="break-all">break-all</p>
<p class="break-keep">break-keep</p>

Content¶

<!-- Content -->
<div class="before:content-[''] after:content-['']">content</div>

Backgrounds¶

Background Attachment¶

<!-- Background attachment -->
<div class="bg-fixed">bg-fixed</div>
<div class="bg-local">bg-local</div>
<div class="bg-scroll">bg-scroll</div>

Background Clip¶

<!-- Background clip -->
<div class="bg-clip-border">bg-clip-border</div>
<div class="bg-clip-padding">bg-clip-padding</div>
<div class="bg-clip-content">bg-clip-content</div>
<div class="bg-clip-text">bg-clip-text</div>

Background Color¶

<!-- Background color -->
<div class="bg-inherit">bg-inherit</div>
<div class="bg-current">bg-current</div>
<div class="bg-transparent">bg-transparent</div>
<div class="bg-black">bg-black</div>
<div class="bg-white">bg-white</div>
<div class="bg-slate-50">bg-slate-50</div>
<div class="bg-slate-100">bg-slate-100</div>
<div class="bg-slate-200">bg-slate-200</div>
<div class="bg-slate-300">bg-slate-300</div>
<div class="bg-slate-400">bg-slate-400</div>
<div class="bg-slate-500">bg-slate-500</div>
<div class="bg-slate-600">bg-slate-600</div>
<div class="bg-slate-700">bg-slate-700</div>
<div class="bg-slate-800">bg-slate-800</div>
<div class="bg-slate-900">bg-slate-900</div>
<div class="bg-slate-950">bg-slate-950</div>

Background Origin¶

<!-- Background origin -->
<div class="bg-origin-border">bg-origin-border</div>
<div class="bg-origin-padding">bg-origin-padding</div>
<div class="bg-origin-content">bg-origin-content</div>

Background Position¶

<!-- Background position -->
<div class="bg-bottom">bg-bottom</div>
<div class="bg-center">bg-center</div>
<div class="bg-left">bg-left</div>
<div class="bg-left-bottom">bg-left-bottom</div>
<div class="bg-left-top">bg-left-top</div>
<div class="bg-right">bg-right</div>
<div class="bg-right-bottom">bg-right-bottom</div>
<div class="bg-right-top">bg-right-top</div>
<div class="bg-top">bg-top</div>

Background Repeat¶

<!-- Background repeat -->
<div class="bg-repeat">bg-repeat</div>
<div class="bg-no-repeat">bg-no-repeat</div>
<div class="bg-repeat-x">bg-repeat-x</div>
<div class="bg-repeat-y">bg-repeat-y</div>
<div class="bg-repeat-round">bg-repeat-round</div>
<div class="bg-repeat-space">bg-repeat-space</div>

Background Size¶

<!-- Background size -->
<div class="bg-auto">bg-auto</div>
<div class="bg-cover">bg-cover</div>
<div class="bg-contain">bg-contain</div>

Background Image¶

<!-- Background image -->
<div class="bg-none">bg-none</div>
<div class="bg-gradient-to-t">bg-gradient-to-t</div>
<div class="bg-gradient-to-tr">bg-gradient-to-tr</div>
<div class="bg-gradient-to-r">bg-gradient-to-r</div>
<div class="bg-gradient-to-br">bg-gradient-to-br</div>
<div class="bg-gradient-to-b">bg-gradient-to-b</div>
<div class="bg-gradient-to-bl">bg-gradient-to-bl</div>
<div class="bg-gradient-to-l">bg-gradient-to-l</div>
<div class="bg-gradient-to-tl">bg-gradient-to-tl</div>

Gradient Color Stops¶

<!-- Gradient color stops -->
<div class="bg-gradient-to-r from-cyan-500 to-blue-500">from-cyan-500 to-blue-500</div>
<div class="bg-gradient-to-r from-sky-500 via-purple-500 to-pink-500">from-sky-500 via-purple-500 to-pink-500</div>

Borders¶

Border Radius¶

<!-- Border radius -->
<div class="rounded-none">rounded-none</div>
<div class="rounded-sm">rounded-sm</div>
<div class="rounded">rounded</div>
<div class="rounded-md">rounded-md</div>
<div class="rounded-lg">rounded-lg</div>
<div class="rounded-xl">rounded-xl</div>
<div class="rounded-2xl">rounded-2xl</div>
<div class="rounded-3xl">rounded-3xl</div>
<div class="rounded-full">rounded-full</div>

<!-- Directional border radius -->
<div class="rounded-t-lg">rounded-t-lg</div>
<div class="rounded-r-lg">rounded-r-lg</div>
<div class="rounded-b-lg">rounded-b-lg</div>
<div class="rounded-l-lg">rounded-l-lg</div>
<div class="rounded-tl-lg">rounded-tl-lg</div>
<div class="rounded-tr-lg">rounded-tr-lg</div>
<div class="rounded-br-lg">rounded-br-lg</div>
<div class="rounded-bl-lg">rounded-bl-lg</div>

Border Width¶

<!-- Border width -->
<div class="border-0">border-0</div>
<div class="border-2">border-2</div>
<div class="border-4">border-4</div>
<div class="border-8">border-8</div>
<div class="border">border</div>

<!-- Directional border width -->
<div class="border-t">border-t</div>
<div class="border-r">border-r</div>
<div class="border-b">border-b</div>
<div class="border-l">border-l</div>
<div class="border-x">border-x</div>
<div class="border-y">border-y</div>

Border Color¶

<!-- Border color -->
<div class="border-inherit">border-inherit</div>
<div class="border-current">border-current</div>
<div class="border-transparent">border-transparent</div>
<div class="border-black">border-black</div>
<div class="border-white">border-white</div>
<div class="border-slate-50">border-slate-50</div>
<div class="border-slate-100">border-slate-100</div>
<div class="border-slate-200">border-slate-200</div>
<div class="border-slate-300">border-slate-300</div>
<div class="border-slate-400">border-slate-400</div>
<div class="border-slate-500">border-slate-500</div>
<div class="border-slate-600">border-slate-600</div>
<div class="border-slate-700">border-slate-700</div>
<div class="border-slate-800">border-slate-800</div>
<div class="border-slate-900">border-slate-900</div>
<div class="border-slate-950">border-slate-950</div>

Border Style¶

<!-- Border style -->
<div class="border-solid">border-solid</div>
<div class="border-dashed">border-dashed</div>
<div class="border-dotted">border-dotted</div>
<div class="border-double">border-double</div>
<div class="border-hidden">border-hidden</div>
<div class="border-none">border-none</div>

Divide Width¶

<!-- Divide width -->
<div class="divide-y divide-gray-200">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="divide-x divide-gray-200">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Divide Color¶

<!-- Divide color -->
<div class="divide-y divide-slate-200">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Divide Style¶

<!-- Divide style -->
<div class="divide-y divide-solid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="divide-y divide-dashed">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="divide-y divide-dotted">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Outline Width¶

<!-- Outline width -->
<div class="outline-0">outline-0</div>
<div class="outline-1">outline-1</div>
<div class="outline-2">outline-2</div>
<div class="outline-4">outline-4</div>
<div class="outline-8">outline-8</div>

Outline Color¶

<!-- Outline color -->
<div class="outline outline-inherit">outline-inherit</div>
<div class="outline outline-current">outline-current</div>
<div class="outline outline-transparent">outline-transparent</div>
<div class="outline outline-black">outline-black</div>
<div class="outline outline-white">outline-white</div>

Outline Style¶

<!-- Outline style -->
<div class="outline outline-none">outline-none</div>
<div class="outline outline-solid">outline-solid</div>
<div class="outline outline-dashed">outline-dashed</div>
<div class="outline outline-dotted">outline-dotted</div>
<div class="outline outline-double">outline-double</div>

Outline Offset¶

<!-- Outline offset -->
<div class="outline outline-offset-0">outline-offset-0</div>
<div class="outline outline-offset-1">outline-offset-1</div>
<div class="outline outline-offset-2">outline-offset-2</div>
<div class="outline outline-offset-4">outline-offset-4</div>
<div class="outline outline-offset-8">outline-offset-8</div>

Ring Width¶

<!-- Ring width -->
<div class="ring-0">ring-0</div>
<div class="ring-1">ring-1</div>
<div class="ring-2">ring-2</div>
<div class="ring">ring</div>
<div class="ring-4">ring-4</div>
<div class="ring-8">ring-8</div>
<div class="ring-inset">ring-inset</div>

Ring Color¶

<!-- Ring color -->
<div class="ring ring-inherit">ring-inherit</div>
<div class="ring ring-current">ring-current</div>
<div class="ring ring-transparent">ring-transparent</div>
<div class="ring ring-black">ring-black</div>
<div class="ring ring-white">ring-white</div>

Ring Offset Width¶

<!-- Ring offset width -->
<div class="ring ring-offset-0">ring-offset-0</div>
<div class="ring ring-offset-1">ring-offset-1</div>
<div class="ring ring-offset-2">ring-offset-2</div>
<div class="ring ring-offset-4">ring-offset-4</div>
<div class="ring ring-offset-8">ring-offset-8</div>

Ring Offset Color¶

<!-- Ring offset color -->
<div class="ring ring-offset-2 ring-offset-inherit">ring-offset-inherit</div>
<div class="ring ring-offset-2 ring-offset-current">ring-offset-current</div>
<div class="ring ring-offset-2 ring-offset-transparent">ring-offset-transparent</div>
<div class="ring ring-offset-2 ring-offset-black">ring-offset-black</div>
<div class="ring ring-offset-2 ring-offset-white">ring-offset-white</div>

Effects¶

Box Shadow¶

<!-- Box shadow -->
<div class="shadow-sm">shadow-sm</div>
<div class="shadow">shadow</div>
<div class="shadow-md">shadow-md</div>
<div class="shadow-lg">shadow-lg</div>
<div class="shadow-xl">shadow-xl</div>
<div class="shadow-2xl">shadow-2xl</div>
<div class="shadow-inner">shadow-inner</div>
<div class="shadow-none">shadow-none</div>

Box Shadow Color¶

<!-- Box shadow color -->
<div class="shadow-lg shadow-inherit">shadow-inherit</div>
<div class="shadow-lg shadow-current">shadow-current</div>
<div class="shadow-lg shadow-transparent">shadow-transparent</div>
<div class="shadow-lg shadow-black">shadow-black</div>
<div class="shadow-lg shadow-white">shadow-white</div>

Opacity¶

<!-- Opacity -->
<div class="opacity-0">opacity-0</div>
<div class="opacity-5">opacity-5</div>
<div class="opacity-10">opacity-10</div>
<div class="opacity-20">opacity-20</div>
<div class="opacity-25">opacity-25</div>
<div class="opacity-30">opacity-30</div>
<div class="opacity-40">opacity-40</div>
<div class="opacity-50">opacity-50</div>
<div class="opacity-60">opacity-60</div>
<div class="opacity-70">opacity-70</div>
<div class="opacity-75">opacity-75</div>
<div class="opacity-80">opacity-80</div>
<div class="opacity-90">opacity-90</div>
<div class="opacity-95">opacity-95</div>
<div class="opacity-100">opacity-100</div>

Mix Blend Mode¶

<!-- Mix blend mode -->
<div class="mix-blend-normal">mix-blend-normal</div>
<div class="mix-blend-multiply">mix-blend-multiply</div>
<div class="mix-blend-screen">mix-blend-screen</div>
<div class="mix-blend-overlay">mix-blend-overlay</div>
<div class="mix-blend-darken">mix-blend-darken</div>
<div class="mix-blend-lighten">mix-blend-lighten</div>
<div class="mix-blend-color-dodge">mix-blend-color-dodge</div>
<div class="mix-blend-color-burn">mix-blend-color-burn</div>
<div class="mix-blend-hard-light">mix-blend-hard-light</div>
<div class="mix-blend-soft-light">mix-blend-soft-light</div>
<div class="mix-blend-difference">mix-blend-difference</div>
<div class="mix-blend-exclusion">mix-blend-exclusion</div>
<div class="mix-blend-hue">mix-blend-hue</div>
<div class="mix-blend-saturation">mix-blend-saturation</div>
<div class="mix-blend-color">mix-blend-color</div>
<div class="mix-blend-luminosity">mix-blend-luminosity</div>
<div class="mix-blend-plus-lighter">mix-blend-plus-lighter</div>

Background Blend Mode¶

<!-- Background blend mode -->
<div class="bg-blend-normal">bg-blend-normal</div>
<div class="bg-blend-multiply">bg-blend-multiply</div>
<div class="bg-blend-screen">bg-blend-screen</div>
<div class="bg-blend-overlay">bg-blend-overlay</div>
<div class="bg-blend-darken">bg-blend-darken</div>
<div class="bg-blend-lighten">bg-blend-lighten</div>
<div class="bg-blend-color-dodge">bg-blend-color-dodge</div>
<div class="bg-blend-color-burn">bg-blend-color-burn</div>
<div class="bg-blend-hard-light">bg-blend-hard-light</div>
<div class="bg-blend-soft-light">bg-blend-soft-light</div>
<div class="bg-blend-difference">bg-blend-difference</div>
<div class="bg-blend-exclusion">bg-blend-exclusion</div>
<div class="bg-blend-hue">bg-blend-hue</div>
<div class="bg-blend-saturation">bg-blend-saturation</div>
<div class="bg-blend-color">bg-blend-color</div>
<div class="bg-blend-luminosity">bg-blend-luminosity</div>

Filters¶

Blur¶

<!-- Blur -->
<div class="blur-none">blur-none</div>
<div class="blur-sm">blur-sm</div>
<div class="blur">blur</div>
<div class="blur-md">blur-md</div>
<div class="blur-lg">blur-lg</div>
<div class="blur-xl">blur-xl</div>
<div class="blur-2xl">blur-2xl</div>
<div class="blur-3xl">blur-3xl</div>

Brightness¶

<!-- Brightness -->
<div class="brightness-0">brightness-0</div>
<div class="brightness-50">brightness-50</div>
<div class="brightness-75">brightness-75</div>
<div class="brightness-90">brightness-90</div>
<div class="brightness-95">brightness-95</div>
<div class="brightness-100">brightness-100</div>
<div class="brightness-105">brightness-105</div>
<div class="brightness-110">brightness-110</div>
<div class="brightness-125">brightness-125</div>
<div class="brightness-150">brightness-150</div>
<div class="brightness-200">brightness-200</div>

Contrast¶

<!-- Contrast -->
<div class="contrast-0">contrast-0</div>
<div class="contrast-50">contrast-50</div>
<div class="contrast-75">contrast-75</div>
<div class="contrast-100">contrast-100</div>
<div class="contrast-125">contrast-125</div>
<div class="contrast-150">contrast-150</div>
<div class="contrast-200">contrast-200</div>

Drop Shadow¶

<!-- Drop shadow -->
<div class="drop-shadow-sm">drop-shadow-sm</div>
<div class="drop-shadow">drop-shadow</div>
<div class="drop-shadow-md">drop-shadow-md</div>
<div class="drop-shadow-lg">drop-shadow-lg</div>
<div class="drop-shadow-xl">drop-shadow-xl</div>
<div class="drop-shadow-2xl">drop-shadow-2xl</div>
<div class="drop-shadow-none">drop-shadow-none</div>

Grayscale¶

<!-- Grayscale -->
<div class="grayscale-0">grayscale-0</div>
<div class="grayscale">grayscale</div>

Hue Rotate¶

<!-- Hue rotate -->
<div class="hue-rotate-0">hue-rotate-0</div>
<div class="hue-rotate-15">hue-rotate-15</div>
<div class="hue-rotate-30">hue-rotate-30</div>
<div class="hue-rotate-60">hue-rotate-60</div>
<div class="hue-rotate-90">hue-rotate-90</div>
<div class="hue-rotate-180">hue-rotate-180</div>

Invert¶

<!-- Invert -->
<div class="invert-0">invert-0</div>
<div class="invert">invert</div>

Saturate¶

<!-- Saturate -->
<div class="saturate-0">saturate-0</div>
<div class="saturate-50">saturate-50</div>
<div class="saturate-100">saturate-100</div>
<div class="saturate-150">saturate-150</div>
<div class="saturate-200">saturate-200</div>

Sepia¶

<!-- Sepia -->
<div class="sepia-0">sepia-0</div>
<div class="sepia">sepia</div>

Backdrop Blur¶

<!-- Backdrop blur -->
<div class="backdrop-blur-none">backdrop-blur-none</div>
<div class="backdrop-blur-sm">backdrop-blur-sm</div>
<div class="backdrop-blur">backdrop-blur</div>
<div class="backdrop-blur-md">backdrop-blur-md</div>
<div class="backdrop-blur-lg">backdrop-blur-lg</div>
<div class="backdrop-blur-xl">backdrop-blur-xl</div>
<div class="backdrop-blur-2xl">backdrop-blur-2xl</div>
<div class="backdrop-blur-3xl">backdrop-blur-3xl</div>

Backdrop Brightness¶

<!-- Backdrop brightness -->
<div class="backdrop-brightness-0">backdrop-brightness-0</div>
<div class="backdrop-brightness-50">backdrop-brightness-50</div>
<div class="backdrop-brightness-75">backdrop-brightness-75</div>
<div class="backdrop-brightness-90">backdrop-brightness-90</div>
<div class="backdrop-brightness-95">backdrop-brightness-95</div>
<div class="backdrop-brightness-100">backdrop-brightness-100</div>
<div class="backdrop-brightness-105">backdrop-brightness-105</div>
<div class="backdrop-brightness-110">backdrop-brightness-110</div>
<div class="backdrop-brightness-125">backdrop-brightness-125</div>
<div class="backdrop-brightness-150">backdrop-brightness-150</div>
<div class="backdrop-brightness-200">backdrop-brightness-200</div>

Backdrop Contrast¶

<!-- Backdrop contrast -->
<div class="backdrop-contrast-0">backdrop-contrast-0</div>
<div class="backdrop-contrast-50">backdrop-contrast-50</div>
<div class="backdrop-contrast-75">backdrop-contrast-75</div>
<div class="backdrop-contrast-100">backdrop-contrast-100</div>
<div class="backdrop-contrast-125">backdrop-contrast-125</div>
<div class="backdrop-contrast-150">backdrop-contrast-150</div>
<div class="backdrop-contrast-200">backdrop-contrast-200</div>

Backdrop Grayscale¶

<!-- Backdrop grayscale -->
<div class="backdrop-grayscale-0">backdrop-grayscale-0</div>
<div class="backdrop-grayscale">backdrop-grayscale</div>

Backdrop Hue Rotate¶

<!-- Backdrop hue rotate -->
<div class="backdrop-hue-rotate-0">backdrop-hue-rotate-0</div>
<div class="backdrop-hue-rotate-15">backdrop-hue-rotate-15</div>
<div class="backdrop-hue-rotate-30">backdrop-hue-rotate-30</div>
<div class="backdrop-hue-rotate-60">backdrop-hue-rotate-60</div>
<div class="backdrop-hue-rotate-90">backdrop-hue-rotate-90</div>
<div class="backdrop-hue-rotate-180">backdrop-hue-rotate-180</div>

Backdrop Invert¶

<!-- Backdrop invert -->
<div class="backdrop-invert-0">backdrop-invert-0</div>
<div class="backdrop-invert">backdrop-invert</div>

Backdrop Opacity¶

<!-- Backdrop opacity -->
<div class="backdrop-opacity-0">backdrop-opacity-0</div>
<div class="backdrop-opacity-5">backdrop-opacity-5</div>
<div class="backdrop-opacity-10">backdrop-opacity-10</div>
<div class="backdrop-opacity-20">backdrop-opacity-20</div>
<div class="backdrop-opacity-25">backdrop-opacity-25</div>
<div class="backdrop-opacity-30">backdrop-opacity-30</div>
<div class="backdrop-opacity-40">backdrop-opacity-40</div>
<div class="backdrop-opacity-50">backdrop-opacity-50</div>
<div class="backdrop-opacity-60">backdrop-opacity-60</div>
<div class="backdrop-opacity-70">backdrop-opacity-70</div>
<div class="backdrop-opacity-75">backdrop-opacity-75</div>
<div class="backdrop-opacity-80">backdrop-opacity-80</div>
<div class="backdrop-opacity-90">backdrop-opacity-90</div>
<div class="backdrop-opacity-95">backdrop-opacity-95</div>
<div class="backdrop-opacity-100">backdrop-opacity-100</div>

Backdrop Saturate¶

<!-- Backdrop saturate -->
<div class="backdrop-saturate-0">backdrop-saturate-0</div>
<div class="backdrop-saturate-50">backdrop-saturate-50</div>
<div class="backdrop-saturate-100">backdrop-saturate-100</div>
<div class="backdrop-saturate-150">backdrop-saturate-150</div>
<div class="backdrop-saturate-200">backdrop-saturate-200</div>

Backdrop Sepia¶

<!-- Backdrop sepia -->
<div class="backdrop-sepia-0">backdrop-sepia-0</div>
<div class="backdrop-sepia">backdrop-sepia</div>

Tables¶

Border Collapse¶

<!-- Border collapse -->
<table class="border-collapse">
  <tr>
    <td>border-collapse</td>
  </tr>
</table>

<table class="border-separate">
  <tr>
    <td>border-separate</td>
  </tr>
</table>

Border Spacing¶

<!-- Border spacing -->
<table class="border-separate border-spacing-0">
  <tr>
    <td>border-spacing-0</td>
  </tr>
</table>

<table class="border-separate border-spacing-1">
  <tr>
    <td>border-spacing-1</td>
  </tr>
</table>

<table class="border-separate border-spacing-2">
  <tr>
    <td>border-spacing-2</td>
  </tr>
</table>

<table class="border-separate border-spacing-x-1">
  <tr>
    <td>border-spacing-x-1</td>
  </tr>
</table>

<table class="border-separate border-spacing-y-1">
  <tr>
    <td>border-spacing-y-1</td>
  </tr>
</table>

Table Layout¶

<!-- Table layout -->
<table class="table-auto">
  <tr>
    <td>table-auto</td>
  </tr>
</table>

<table class="table-fixed">
  <tr>
    <td>table-fixed</td>
  </tr>
</table>

Caption Side¶

<!-- Caption side -->
<table class="caption-top">
  <caption>caption-top</caption>
  <tr>
    <td>Cell</td>
  </tr>
</table>

<table class="caption-bottom">
  <caption>caption-bottom</caption>
  <tr>
    <td>Cell</td>
  </tr>
</table>

Transitions & Animation¶

Transition Property¶

<!-- Transition property -->
<div class="transition-none">transition-none</div>
<div class="transition-all">transition-all</div>
<div class="transition">transition</div>
<div class="transition-colors">transition-colors</div>
<div class="transition-opacity">transition-opacity</div>
<div class="transition-shadow">transition-shadow</div>
<div class="transition-transform">transition-transform</div>

Transition Duration¶

<!-- Transition duration -->
<div class="transition duration-75">duration-75</div>
<div class="transition duration-100">duration-100</div>
<div class="transition duration-150">duration-150</div>
<div class="transition duration-200">duration-200</div>
<div class="transition duration-300">duration-300</div>
<div class="transition duration-500">duration-500</div>
<div class="transition duration-700">duration-700</div>
<div class="transition duration-1000">duration-1000</div>

Transition Timing Function¶

<!-- Transition timing function -->
<div class="transition ease-linear">ease-linear</div>
<div class="transition ease-in">ease-in</div>
<div class="transition ease-out">ease-out</div>
<div class="transition ease-in-out">ease-in-out</div>

Transition Delay¶

<!-- Transition delay -->
<div class="transition delay-75">delay-75</div>
<div class="transition delay-100">delay-100</div>
<div class="transition delay-150">delay-150</div>
<div class="transition delay-200">delay-200</div>
<div class="transition delay-300">delay-300</div>
<div class="transition delay-500">delay-500</div>
<div class="transition delay-700">delay-700</div>
<div class="transition delay-1000">delay-1000</div>

Animation¶

<!-- Animation -->
<div class="animate-none">animate-none</div>
<div class="animate-spin">animate-spin</div>
<div class="animate-ping">animate-ping</div>
<div class="animate-pulse">animate-pulse</div>
<div class="animate-bounce">animate-bounce</div>

Transforms¶

Scale¶

<!-- Scale -->
<div class="scale-0">scale-0</div>
<div class="scale-50">scale-50</div>
<div class="scale-75">scale-75</div>
<div class="scale-90">scale-90</div>
<div class="scale-95">scale-95</div>
<div class="scale-100">scale-100</div>
<div class="scale-105">scale-105</div>
<div class="scale-110">scale-110</div>
<div class="scale-125">scale-125</div>
<div class="scale-150">scale-150</div>

<!-- Directional scale -->
<div class="scale-x-0">scale-x-0</div>
<div class="scale-x-50">scale-x-50</div>
<div class="scale-x-75">scale-x-75</div>
<div class="scale-x-90">scale-x-90</div>
<div class="scale-x-95">scale-x-95</div>
<div class="scale-x-100">scale-x-100</div>
<div class="scale-x-105">scale-x-105</div>
<div class="scale-x-110">scale-x-110</div>
<div class="scale-x-125">scale-x-125</div>
<div class="scale-x-150">scale-x-150</div>

<div class="scale-y-0">scale-y-0</div>
<div class="scale-y-50">scale-y-50</div>
<div class="scale-y-75">scale-y-75</div>
<div class="scale-y-90">scale-y-90</div>
<div class="scale-y-95">scale-y-95</div>
<div class="scale-y-100">scale-y-100</div>
<div class="scale-y-105">scale-y-105</div>
<div class="scale-y-110">scale-y-110</div>
<div class="scale-y-125">scale-y-125</div>
<div class="scale-y-150">scale-y-150</div>

Rotate¶

<!-- Rotate -->
<div class="rotate-0">rotate-0</div>
<div class="rotate-1">rotate-1</div>
<div class="rotate-2">rotate-2</div>
<div class="rotate-3">rotate-3</div>
<div class="rotate-6">rotate-6</div>
<div class="rotate-12">rotate-12</div>
<div class="rotate-45">rotate-45</div>
<div class="rotate-90">rotate-90</div>
<div class="rotate-180">rotate-180</div>

<!-- Negative rotate -->
<div class="-rotate-1">-rotate-1</div>
<div class="-rotate-2">-rotate-2</div>
<div class="-rotate-3">-rotate-3</div>
<div class="-rotate-6">-rotate-6</div>
<div class="-rotate-12">-rotate-12</div>
<div class="-rotate-45">-rotate-45</div>
<div class="-rotate-90">-rotate-90</div>
<div class="-rotate-180">-rotate-180</div>

Translate¶

<!-- Translate -->
<div class="translate-x-0">translate-x-0</div>
<div class="translate-x-1">translate-x-1</div>
<div class="translate-x-2">translate-x-2</div>
<div class="translate-x-3">translate-x-3</div>
<div class="translate-x-4">translate-x-4</div>
<div class="translate-x-5">translate-x-5</div>
<div class="translate-x-6">translate-x-6</div>
<div class="translate-x-8">translate-x-8</div>
<div class="translate-x-10">translate-x-10</div>
<div class="translate-x-12">translate-x-12</div>
<div class="translate-x-16">translate-x-16</div>
<div class="translate-x-20">translate-x-20</div>
<div class="translate-x-24">translate-x-24</div>
<div class="translate-x-32">translate-x-32</div>
<div class="translate-x-40">translate-x-40</div>
<div class="translate-x-48">translate-x-48</div>
<div class="translate-x-56">translate-x-56</div>
<div class="translate-x-64">translate-x-64</div>

<!-- Fractional translate -->
<div class="translate-x-1/2">translate-x-1/2</div>
<div class="translate-x-1/3">translate-x-1/3</div>
<div class="translate-x-2/3">translate-x-2/3</div>
<div class="translate-x-1/4">translate-x-1/4</div>
<div class="translate-x-2/4">translate-x-2/4</div>
<div class="translate-x-3/4">translate-x-3/4</div>
<div class="translate-x-full">translate-x-full</div>

<!-- Y-axis translate -->
<div class="translate-y-0">translate-y-0</div>
<div class="translate-y-1">translate-y-1</div>
<div class="translate-y-2">translate-y-2</div>
<div class="translate-y-3">translate-y-3</div>
<div class="translate-y-4">translate-y-4</div>
<div class="translate-y-5">translate-y-5</div>
<div class="translate-y-6">translate-y-6</div>
<div class="translate-y-8">translate-y-8</div>
<div class="translate-y-10">translate-y-10</div>
<div class="translate-y-12">translate-y-12</div>
<div class="translate-y-16">translate-y-16</div>
<div class="translate-y-20">translate-y-20</div>
<div class="translate-y-24">translate-y-24</div>
<div class="translate-y-32">translate-y-32</div>
<div class="translate-y-40">translate-y-40</div>
<div class="translate-y-48">translate-y-48</div>
<div class="translate-y-56">translate-y-56</div>
<div class="translate-y-64">translate-y-64</div>

<!-- Fractional translate -->
<div class="translate-y-1/2">translate-y-1/2</div>
<div class="translate-y-1/3">translate-y-1/3</div>
<div class="translate-y-2/3">translate-y-2/3</div>
<div class="translate-y-1/4">translate-y-1/4</div>
<div class="translate-y-2/4">translate-y-2/4</div>
<div class="translate-y-3/4">translate-y-3/4</div>
<div class="translate-y-full">translate-y-full</div>

<!-- Negative translate -->
<div class="-translate-x-1">-translate-x-1</div>
<div class="-translate-x-2">-translate-x-2</div>
<div class="-translate-x-3">-translate-x-3</div>
<div class="-translate-x-4">-translate-x-4</div>
<div class="-translate-x-5">-translate-x-5</div>
<div class="-translate-x-6">-translate-x-6</div>
<div class="-translate-x-8">-translate-x-8</div>
<div class="-translate-x-10">-translate-x-10</div>
<div class="-translate-x-12">-translate-x-12</div>
<div class="-translate-x-16">-translate-x-16</div>
<div class="-translate-x-20">-translate-x-20</div>
<div class="-translate-x-24">-translate-x-24</div>
<div class="-translate-x-32">-translate-x-32</div>
<div class="-translate-x-40">-translate-x-40</div>
<div class="-translate-x-48">-translate-x-48</div>
<div class="-translate-x-56">-translate-x-56</div>
<div class="-translate-x-64">-translate-x-64</div>

<div class="-translate-y-1">-translate-y-1</div>
<div class="-translate-y-2">-translate-y-2</div>
<div class="-translate-y-3">-translate-y-3</div>
<div class="-translate-y-4">-translate-y-4</div>
<div class="-translate-y-5">-translate-y-5</div>
<div class="-translate-y-6">-translate-y-6</div>
<div class="-translate-y-8">-translate-y-8</div>
<div class="-translate-y-10">-translate-y-10</div>
<div class="-translate-y-12">-translate-y-12</div>
<div class="-translate-y-16">-translate-y-16</div>
<div class="-translate-y-20">-translate-y-20</div>
<div class="-translate-y-24">-translate-y-24</div>
<div class="-translate-y-32">-translate-y-32</div>
<div class="-translate-y-40">-translate-y-40</div>
<div class="-translate-y-48">-translate-y-48</div>
<div class="-translate-y-56">-translate-y-56</div>
<div class="-translate-y-64">-translate-y-64</div>

<!-- Fractional negative translate -->
<div class="-translate-x-1/2">-translate-x-1/2</div>
<div class="-translate-x-1/3">-translate-x-1/3</div>
<div class="-translate-x-2/3">-translate-x-2/3</div>
<div class="-translate-x-1/4">-translate-x-1/4</div>
<div class="-translate-x-2/4">-translate-x-2/4</div>
<div class="-translate-x-3/4">-translate-x-3/4</div>
<div class="-translate-x-full">-translate-x-full</div>

<div class="-translate-y-1/2">-translate-y-1/2</div>
<div class="-translate-y-1/3">-translate-y-1/3</div>
<div class="-translate-y-2/3">-translate-y-2/3</div>
<div class="-translate-y-1/4">-translate-y-1/4</div>
<div class="-translate-y-2/4">-translate-y-2/4</div>
<div class="-translate-y-3/4">-translate-y-3/4</div>
<div class="-translate-y-full">-translate-y-full</div>

Skew¶

<!-- Skew -->
<div class="skew-x-0">skew-x-0</div>
<div class="skew-x-1">skew-x-1</div>
<div class="skew-x-2">skew-x-2</div>
<div class="skew-x-3">skew-x-3</div>
<div class="skew-x-6">skew-x-6</div>
<div class="skew-x-12">skew-x-12</div>

<div class="skew-y-0">skew-y-0</div>
<div class="skew-y-1">skew-y-1</div>
<div class="skew-y-2">skew-y-2</div>
<div class="skew-y-3">skew-y-3</div>
<div class="skew-y-6">skew-y-6</div>
<div class="skew-y-12">skew-y-12</div>

<!-- Negative skew -->
<div class="-skew-x-1">-skew-x-1</div>
<div class="-skew-x-2">-skew-x-2</div>
<div class="-skew-x-3">-skew-x-3</div>
<div class="-skew-x-6">-skew-x-6</div>
<div class="-skew-x-12">-skew-x-12</div>

<div class="-skew-y-1">-skew-y-1</div>
<div class="-skew-y-2">-skew-y-2</div>
<div class="-skew-y-3">-skew-y-3</div>
<div class="-skew-y-6">-skew-y-6</div>
<div class="-skew-y-12">-skew-y-12</div>

Transform Origin¶

<!-- Transform origin -->
<div class="origin-center">origin-center</div>
<div class="origin-top">origin-top</div>
<div class="origin-top-right">origin-top-right</div>
<div class="origin-right">origin-right</div>
<div class="origin-bottom-right">origin-bottom-right</div>
<div class="origin-bottom">origin-bottom</div>
<div class="origin-bottom-left">origin-bottom-left</div>
<div class="origin-left">origin-left</div>
<div class="origin-top-left">origin-top-left</div>

Interactivity¶

Accent Color¶

<!-- Accent color -->
<input type="checkbox" class="accent-inherit" />
<input type="checkbox" class="accent-current" />
<input type="checkbox" class="accent-transparent" />
<input type="checkbox" class="accent-black" />
<input type="checkbox" class="accent-white" />
<input type="checkbox" class="accent-slate-50" />
<input type="checkbox" class="accent-slate-100" />
<input type="checkbox" class="accent-slate-200" />
<input type="checkbox" class="accent-slate-300" />
<input type="checkbox" class="accent-slate-400" />
<input type="checkbox" class="accent-slate-500" />
<input type="checkbox" class="accent-slate-600" />
<input type="checkbox" class="accent-slate-700" />
<input type="checkbox" class="accent-slate-800" />
<input type="checkbox" class="accent-slate-900" />
<input type="checkbox" class="accent-slate-950" />

Appearance¶

<!-- Appearance -->
<select class="appearance-none">
  <option>appearance-none</option>
</select>
<select class="appearance-auto">
  <option>appearance-auto</option>
</select>

Cursor¶

<!-- Cursor -->
<div class="cursor-auto">cursor-auto</div>
<div class="cursor-default">cursor-default</div>
<div class="cursor-pointer">cursor-pointer</div>
<div class="cursor-wait">cursor-wait</div>
<div class="cursor-text">cursor-text</div>
<div class="cursor-move">cursor-move</div>
<div class="cursor-help">cursor-help</div>
<div class="cursor-not-allowed">cursor-not-allowed</div>
<div class="cursor-none">cursor-none</div>
<div class="cursor-context-menu">cursor-context-menu</div>
<div class="cursor-progress">cursor-progress</div>
<div class="cursor-cell">cursor-cell</div>
<div class="cursor-crosshair">cursor-crosshair</div>
<div class="cursor-vertical-text">cursor-vertical-text</div>
<div class="cursor-alias">cursor-alias</div>
<div class="cursor-copy">cursor-copy</div>
<div class="cursor-no-drop">cursor-no-drop</div>
<div class="cursor-grab">cursor-grab</div>
<div class="cursor-grabbing">cursor-grabbing</div>
<div class="cursor-all-scroll">cursor-all-scroll</div>
<div class="cursor-col-resize">cursor-col-resize</div>
<div class="cursor-row-resize">cursor-row-resize</div>
<div class="cursor-n-resize">cursor-n-resize</div>
<div class="cursor-e-resize">cursor-e-resize</div>
<div class="cursor-s-resize">cursor-s-resize</div>
<div class="cursor-w-resize">cursor-w-resize</div>
<div class="cursor-ne-resize">cursor-ne-resize</div>
<div class="cursor-nw-resize">cursor-nw-resize</div>
<div class="cursor-se-resize">cursor-se-resize</div>
<div class="cursor-sw-resize">cursor-sw-resize</div>
<div class="cursor-ew-resize">cursor-ew-resize</div>
<div class="cursor-ns-resize">cursor-ns-resize</div>
<div class="cursor-nesw-resize">cursor-nesw-resize</div>
<div class="cursor-nwse-resize">cursor-nwse-resize</div>
<div class="cursor-zoom-in">cursor-zoom-in</div>
<div class="cursor-zoom-out">cursor-zoom-out</div>

Caret Color¶

<!-- Caret color -->
<input class="caret-inherit" />
<input class="caret-current" />
<input class="caret-transparent" />
<input class="caret-black" />
<input class="caret-white" />
<input class="caret-slate-50" />
<input class="caret-slate-100" />
<input class="caret-slate-200" />
<input class="caret-slate-300" />
<input class="caret-slate-400" />
<input class="caret-slate-500" />
<input class="caret-slate-600" />
<input class="caret-slate-700" />
<input class="caret-slate-800" />
<input class="caret-slate-900" />
<input class="caret-slate-950" />

Pointer Events¶

<!-- Pointer events -->
<div class="pointer-events-none">pointer-events-none</div>
<div class="pointer-events-auto">pointer-events-auto</div>

Resize¶

<!-- Resize -->
<textarea class="resize-none">resize-none</textarea>
<textarea class="resize-y">resize-y</textarea>
<textarea class="resize-x">resize-x</textarea>
<textarea class="resize">resize</textarea>

Scroll Behavior¶

<!-- Scroll behavior -->
<div class="scroll-auto">scroll-auto</div>
<div class="scroll-smooth">scroll-smooth</div>

Scroll Margin¶

<!-- Scroll margin -->
<div class="scroll-m-0">scroll-m-0</div>
<div class="scroll-m-1">scroll-m-1</div>
<div class="scroll-m-2">scroll-m-2</div>
<div class="scroll-m-3">scroll-m-3</div>
<div class="scroll-m-4">scroll-m-4</div>
<div class="scroll-m-5">scroll-m-5</div>
<div class="scroll-m-6">scroll-m-6</div>
<div class="scroll-m-8">scroll-m-8</div>
<div class="scroll-m-10">scroll-m-10</div>
<div class="scroll-m-12">scroll-m-12</div>
<div class="scroll-m-16">scroll-m-16</div>
<div class="scroll-m-20">scroll-m-20</div>
<div class="scroll-m-24">scroll-m-24</div>
<div class="scroll-m-32">scroll-m-32</div>
<div class="scroll-m-40">scroll-m-40</div>
<div class="scroll-m-48">scroll-m-48</div>
<div class="scroll-m-56">scroll-m-56</div>
<div class="scroll-m-64">scroll-m-64</div>

<!-- Directional scroll margin -->
<div class="scroll-mt-0">scroll-mt-0</div>
<div class="scroll-mr-0">scroll-mr-0</div>
<div class="scroll-mb-0">scroll-mb-0</div>
<div class="scroll-ml-0">scroll-ml-0</div>
<div class="scroll-mx-0">scroll-mx-0</div>
<div class="scroll-my-0">scroll-my-0</div>

Scroll Padding¶

<!-- Scroll padding -->
<div class="scroll-p-0">scroll-p-0</div>
<div class="scroll-p-1">scroll-p-1</div>
<div class="scroll-p-2">scroll-p-2</div>
<div class="scroll-p-3">scroll-p-3</div>
<div class="scroll-p-4">scroll-p-4</div>
<div class="scroll-p-5">scroll-p-5</div>
<div class="scroll-p-6">scroll-p-6</div>
<div class="scroll-p-8">scroll-p-8</div>
<div class="scroll-p-10">scroll-p-10</div>
<div class="scroll-p-12">scroll-p-12</div>
<div class="scroll-p-16">scroll-p-16</div>
<div class="scroll-p-20">scroll-p-20</div>
<div class="scroll-p-24">scroll-p-24</div>
<div class="scroll-p-32">scroll-p-32</div>
<div class="scroll-p-40">scroll-p-40</div>
<div class="scroll-p-48">scroll-p-48</div>
<div class="scroll-p-56">scroll-p-56</div>
<div class="scroll-p-64">scroll-p-64</div>

<!-- Directional scroll padding -->
<div class="scroll-pt-0">scroll-pt-0</div>
<div class="scroll-pr-0">scroll-pr-0</div>
<div class="scroll-pb-0">scroll-pb-0</div>
<div class="scroll-pl-0">scroll-pl-0</div>
<div class="scroll-px-0">scroll-px-0</div>
<div class="scroll-py-0">scroll-py-0</div>

Scroll Snap Align¶

<!-- Scroll snap align -->
<div class="snap-start">snap-start</div>
<div class="snap-end">snap-end</div>
<div class="snap-center">snap-center</div>
<div class="snap-align-none">snap-align-none</div>

Scroll Snap Stop¶

<!-- Scroll snap stop -->
<div class="snap-normal">snap-normal</div>
<div class="snap-always">snap-always</div>

Scroll Snap Type¶

<!-- Scroll snap type -->
<div class="snap-none">snap-none</div>
<div class="snap-x">snap-x</div>
<div class="snap-y">snap-y</div>
<div class="snap-both">snap-both</div>
<div class="snap-mandatory">snap-mandatory</div>
<div class="snap-proximity">snap-proximity</div>

Touch Action¶

<!-- Touch action -->
<div class="touch-auto">touch-auto</div>
<div class="touch-none">touch-none</div>
<div class="touch-pan-x">touch-pan-x</div>
<div class="touch-pan-left">touch-pan-left</div>
<div class="touch-pan-right">touch-pan-right</div>
<div class="touch-pan-y">touch-pan-y</div>
<div class="touch-pan-up">touch-pan-up</div>
<div class="touch-pan-down">touch-pan-down</div>
<div class="touch-pinch-zoom">touch-pinch-zoom</div>
<div class="touch-manipulation">touch-manipulation</div>

User Select¶

<!-- User select -->
<div class="select-none">select-none</div>
<div class="select-text">select-text</div>
<div class="select-all">select-all</div>
<div class="select-auto">select-auto</div>

Will Change¶

<!-- Will change -->
<div class="will-change-auto">will-change-auto</div>
<div class="will-change-scroll">will-change-scroll</div>
<div class="will-change-contents">will-change-contents</div>
<div class="will-change-transform">will-change-transform</div>

SVG¶

Fill¶

<!-- Fill -->
<svg class="fill-inherit">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="fill-current">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="fill-transparent">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="fill-black">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="fill-white">
  <circle cx="50" cy="50" r="40" />
</svg>

Stroke¶

<!-- Stroke -->
<svg class="stroke-inherit">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-current">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-transparent">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-black">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-white">
  <circle cx="50" cy="50" r="40" />
</svg>

Stroke Width¶

<!-- Stroke width -->
<svg class="stroke-0">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-1">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-2">
  <circle cx="50" cy="50" r="40" />
</svg>

Accessibility¶

Screen Readers¶

<!-- Screen readers -->
<div class="sr-only">sr-only</div>
<div class="not-sr-only">not-sr-only</div>

Focus¶

<!-- Focus -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">
  Accessible button
</button>

<input class="focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />

ARIA Attributes¶

<!-- ARIA attributes -->
<button aria-label="Close dialog" class="p-2">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
  </svg>
</button>

<div role="alert" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
  Error message
</div>

Responsive Design¶

Breakpoints¶

<!-- Responsive breakpoints -->
<div class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl">
  Responsive text
</div>

<!-- Mobile first approach -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

<!-- Hide/show at different breakpoints -->
<div class="block md:hidden">Mobile only</div>
<div class="hidden md:block">Desktop only</div>

Container Queries¶

<!-- Container queries -->
<div class="@container">
  <div class="@lg:text-xl">
    Container query text
  </div>
</div>

Dark Mode¶

Dark Mode Setup¶

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

Dark Mode Classes¶

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">
    Dark mode heading
  </h1>
  <p class="text-gray-600 dark:text-gray-300">
    Dark mode paragraph
  </p>
</div>

<!-- Toggle dark mode -->
<button onclick="toggleDarkMode()" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded">
  Toggle Dark Mode
</button>

<script>
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}
</script>

Customization¶

Extending the Theme¶

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1fb6ff',
        'brand-purple': '#7e5bef',
        'brand-pink': '#ff49db',
        'brand-orange': '#ff7849',
        'brand-green': '#13ce66',
        'brand-yellow': '#ffc82c',
        'brand-gray-dark': '#273444',
        'brand-gray': '#8492a6',
        'brand-gray-light': '#d3dce6',
      },
      fontFamily: {
        'display': ['Oswald'],
        'body': ['"Open Sans"'],
      },
      spacing: {
        '96': '24rem',
        '128': '32rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Custom Components¶

/* Custom components */
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }

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

  .input-field {
    @apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }
}

Custom Utilities¶

/* Custom utilities */
@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .text-shadow-lg {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  }

  .bg-gradient-radial {
    background-image: radial-gradient(circle, var(--tw-gradient-stops));
  }
}

Components¶

Button Component¶

<!-- Primary button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Primary Button
</button>

<!-- Secondary button -->
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
  Secondary Button
</button>

<!-- Disabled button -->
<button class="bg-gray-300 text-gray-500 font-bold py-2 px-4 rounded cursor-not-allowed" disabled>
  Disabled Button
</button>

Card Component¶

<!-- Basic card -->
<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
  </div>
</div>

Form Component¶

<!-- Form -->
<form class="w-full max-w-lg">
  <div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
        First Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="Jane">
      <p class="text-red-500 text-xs italic">Please fill out this field.</p>
    </div>
    <div class="w-full md:w-1/2 px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
        Last Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" placeholder="Doe">
    </div>
  </div>
  <div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-password">
        E-mail
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="email" type="email">
      <p class="text-gray-600 text-xs italic">Some tips - as long as needed</p>
    </div>
  </div>
  <div class="flex flex-wrap -mx-3 mb-2">
    <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
        City
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-city" type="text" placeholder="Albuquerque">
    </div>
    <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
        State
      </label>
      <div class="relative">
        <select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
          <option>New Mexico</option>
          <option>Missouri</option>
          <option>Texas</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
    </div>
    <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
        Zip
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-zip" type="text" placeholder="90210">
    </div>
  </div>
</form>

<!-- Navigation -->
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
        Docs
      </a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
        Examples
      </a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
        Blog
      </a>
    </div>
    <div>
      <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
    </div>
  </div>
</nav>

Best Practices¶

Performance¶

Purge unused CSS: Configure PurgeCSS to remove unused styles in production
Use JIT mode: Enable Just-In-Time compilation for faster builds
Optimize for production: Minify CSS and remove comments

Maintainability¶

Use semantic class names: Combine utility classes into meaningful component classes
Extract components: Create reusable component classes for common patterns
Document custom utilities: Comment custom utilities and components

Accessibility¶

Focus states: Always include focus states for interactive elements
Color contrast: Ensure sufficient color contrast for text
Screen readers: Use sr-only class for screen reader content

Responsive Design¶

Mobile first: Design for mobile devices first, then enhance for larger screens
Test breakpoints: Test your design at all breakpoint sizes
Use container queries: Consider container queries for component-based responsive design

Summary¶

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup. Key benefits include:

Utility-First: Build complex components from a constrained set of primitive utilities
Responsive: Every utility class can be applied conditionally at different breakpoints
Customizable: Customize the framework to match your design system
Performance: Automatically remove unused CSS in production builds
Developer Experience: Excellent IntelliSense support and developer tools

By mastering Tailwind CSS utilities and following best practices, you can build beautiful, responsive, and maintainable user interfaces quickly and efficiently.