← Back

Tailwind CSS Cheat Sheet

Installation

npm i -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: []
};

/*index.css*/

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

<!index.html>

<!doctype html>
<html>
  <head>
    <!...>
    <link href="./output.css" rel="stylesheet" />
  </head>
  <body>
    <!...>
  </body>
</html>

Text

Text Color

<p class="text-gray-700">This text is gray</p>

Text Size

<p className="text-xl">Large Text</p>

Font Weight

<p className="font-bold">Bold Text</p>

Text Alignment

<p className="text-center">Centered Text</p>

Text alignment classes include text-left, text-center, text-right, and text-justify.

Font Family

<p className="font-mono">Mono Text</p>

You can add custom fonts by extending the theme configuration in your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        customFont: ["Custom Font", "sans-serif"]
      }
    }
  }
};

Background and Borders

Background Color

<button className="bg-green-300">Click me!</button>

You can add custom colors by extending the theme configuration in your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      colors: {
        // Add your custom colors here
        primary: "#1a73e8",
        secondary: "#ff8c00",
        accent: "#d32f2f",
        customGray: {
          50: "#f9f9f9",
          100: "#f0f0f0",
          200: "#d9d9d9",
          300: "#c2c2c2"
        }
      }
    }
  }
};

Background Gradient

<div className="bg-gradient-to-r from-blue-500 to-green-500">
  Gradient Background
</div>

Background Radius

<div className="rounded-lg">Rounded Corners</div>

Border Radius

<div className="rounded-lg">Rounded Corners</div>

Border Width

<div className="border-2">Thick Border</div>

Shadow

<div className="shadow-lg">Large Shadow Box</div>

Layout, Positioning and Sizing

Width

<div className="w-1/2">Half Width Content</div>

Height

<div className="h-32">Fixed Height Box</div>

Padding

<div className="p-4">Padded Content</div>

Margin

<div className="mt-6">Margin Top Content</div>

Display

<div className="inline-block">Inline Block Content</div>

Position

<div className="absolute top-0 left-0">Top-Left Corner</div>

Z-Index

<div className="z-50">High Z-Index</div>

Container

<div className="container mx-auto">Centered Container</div>

Aspect Ratio

<div className="aspect-w-16 aspect-h-9">16:9 Aspect Ratio</div>

Breakpoints

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

Breakpoints are used to apply different styles based on screen size.

You can add these prefixes to any class to change the style at different screen sizes. For example, text-sm will apply by default, but lg:text-xl changes the text size to larger when the screen width reaches 1024px.

You can change the default breakpoints in the tailwind.config.js file.

module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",

      //Custom breakpoint
      custom: "900px"
    }
  }
};

Flexbox and Grid

image.png

Flex Container

<div className="flex">Flex Container</div>

Flex Direction

<div className="flex flex-col">Vertical Flex</div>

Justify Content

<div className="flex justify-between">Spaced Out Content</div>

Align Items

<div className="flex items-center">Centered Flex Items</div>

Flex Wrap

<div className="flex flex-wrap">Wrapped Flex Items</div>

Align Self

<div className="flex">
  <div className="self-end">Aligned to End</div>
</div>

Grid Container

<div className="grid grid-cols-3">Three Column Grid</div>

Grid Rows

<div className="grid grid-rows-2">Two Row Grid</div>

Column Span

<div className="col-span-2">Span Two Columns</div>

Row Span

<div className="row-span-2">Span Two Rows</div>

Gap

<div className="grid gap-4">Grid with Gaps</div>

Interactivity and Utility

Pseudo-Classes

<button className="hover:bg-blue-500">Hover Me!</button>

Dark Mode

<div className="bg-white text-black dark:bg-black dark:text-white">
  Light/Dark Mode Content
</div>

Visibility

<div className="invisible">Invisible Content</div>

Cursor

<button className="cursor-pointer">Clickable Button</button>

Overflow

<div className="overflow-auto">Scrollable Content</div>

Transform & Transition

<div className="transform hover:scale-110 transition duration-300">
  Hover to Enlarge
</div>

Animations

<div className="animate-bounce">Bouncing Element</div>

module.exports = {
  theme: {
    extend: {
      animation: {
        "spin-slow": "spin 3s linear infinite"
      }
    }
  }
};

<div className="animate-spin-slow">Slow Spinning Element</div>

Arbitrary Values

<div className="w-[450px] h-[300px] bg-[#1a73e8]">Custom Width and Color</div>

Arbitrary Variants

<div className="hover:[text-decoration:underline] md:[text-align:right]">
  Custom Variants
</div>