Tailwind Cheat Sheet

1/1/1970

Tailwind Cheat Sheet

Installation Using Tailwind CLI or PostCSS

Step 1: Install Tailwind CSS

For CLI:

# Install Tailwind CSS
npm install -D tailwindcss
 
# Create `tailwind.config.js` file
npx tailwindcss init

Step 2: Configure Template Paths

Update tailwind.config.js to include the paths to all your template files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // Adjust paths as per your project structure
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3: Add Tailwind Directives to CSS

Create your main CSS file (e.g., src/index.css) and include Tailwind's layers:

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

Step 4: Build Process

For CLI:

# Scan template files for classes and build your CSS
npx tailwindcss -i ./src/index.css -o ./src/output.css --watch

For PostCSS:

# Install  PostCSS and Autoprefixer
npm install -D  postcss autoprefixer
// setup `postcss.config.js`
module.exports = {
  plugins: {
	tailwindcss: {},
	autoprefixer: {},
  },
}

Step 5: Include the Generated CSS

For CLI:

import './output.css';

or

<head>
  <link href="./output.css" rel="stylesheet">
</head>

For PostCSS:

import './index.css';

or

<head>
  <link href="./index.css" rel="stylesheet">
</head>

Using the Tailwind CLI

Using Tailwind as a PostCSS Plugin

Utility-First Fundamentals

Tailwind CSS Advantage

Advantage over Inline style

Tailwind Cheat sheet

Only Important utility classes, and variants are noted, for more check -> flowbite/tailwind

1. LAYOUT

Container

Apply the max-width of an element to fix its width to the current breakpoint.

.container {width: 100%}

  x-auto -> center & px-* ->horizontal padding 

<div class="container mx-auto px-4">

sm, lg etc. -> specific styles at different breakpoints.

<div class="md:container md:mx-auto">

Box Sizing

Define how the width and height of an element are calculated: should they include padding and borders, or not.

.box-border  {box-sizing: border-box};
.box-content  {box-sizing: content-box};

Breakpoints

Use the breakpoints (screen sizes) to set how the utility-classes respond according to the device width.

sm: -> @media (min-width: 640px) { ... }
md: -> @media (min-width: 768px) { ... }
lg: -> @media (min-width: 1024px) { ... }
xl: -> @media (min-width: 1280px) { ... }
2xl: -> @media (min-width: 1536px) { ... }

Display

.hidden { display: none; }
.contents { display: contents; }
.list-item { display: list-item; }
.block { display: block; }
.inline { display: inline; }
.flex { display: flex; }
.table { display: table; }
.grid { display: grid; }

Float

.float-right {float: right;}
.float-left {float: left;}
.float-none {float: none;}

Object Fit

.object-contain {object-fit: contain;}
.object-cover {object-fit: cover;}
.object-fill {object-fit: fill;}
.object-none {object-fit: none;}
.object-scale-down {object-fit: scale-down;}

Object Position

Specify the alignment of the selected replaced element's contents within the element's box.

.object-center {object-position: center;}
.object-bottom {object-position: bottom;}
.object-left-top {object-position: left top}

Overflow

Set the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-y-scroll { overflow-y: scroll; }
 
.overflow-x-auto { overflow-x: auto; }
.overflow-y-hidden { overflow-y: hidden; }

Scroll Behavior

.scrolling-touch { -webkit-overflow-scrolling: touch; }
.scrolling-auto { -webkit-overflow-scrolling: auto; }

Position Behavior

Set how an element is positioned in a document.

.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

POSITION

Determine the final location of positioned elements.

.inset-0 {top: 0rem; right: 0rem; bottom: 0rem; left: 0rem;}
.inset-x-2.5 {right: 0.625rem; left: 0.625rem;}
.-inset-y-5 {top: -1.25rem; bottom: -1.25rem;}
.inset-x-auto {right:auto; left:auto}
.top-1/4 {top: 25%;}
.-right-24 {right: -6rem;}
.left-full {left: 100%; }

Visibility

Show or hide an element without changing the layout of a document

.visible {visibility: visible;}
.invisible {visibility: hidden;}

Z-index

Set the z-order of a positioned element and its descendants or flex items.

 
.z-0 {z-index: 0;}
.z-10 {z-index: 10;}
.z-auto {z-index: auto;}

2. FLEXBOX

Display

Set how a flex item will grow or shrink to fit the space available in its flex container.

.flex {display: flex;}
.inline-flex {display: inline-flex;}

Flex Direction

Set how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)

.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

Flex Wrap

Set whether flex items are forced onto one line or can wrap onto multiple lines.

.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

Set how a flex item will grow or shrink to fit the space available in its flex container.

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

Flex Grow

Set the flex grow factor of a flex item's main size.

.flex-grow {flex-grow: 1;}
.flex-grow-0 {flex-grow: 0;}

Flex Shrink

Set the flex shrink factor of a flex item.

.flex-shrink {flex-shrink: 1;}
.flex-shrink-0 {flex-shrink: 0;}

Order

Set the order to lay out an item in a flex or grid container.

.order-first {order: -9999;}
.order-last {order: 9999;}
.order-none {order: 0;}
.order-5 {order: 5;}

Values Range : 1-12

3. GRID

4. SPACING

Padding

Set the padding area of an element on all sides, vertically, horizontally, or just on one side.

.p-0 {padding: 0rem;}
.-px-2 {padding-left: 0.5rem; padding-right: 0.5rem;}
.pt-px {padding-top: 1px;}

Margin

Set the margin area of an element on all sides, vertically, horizontally, or just on one side.

.m-0 { margin: 0rem; } 
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } 
.mt-px { margin-top: 1px; }

Space Between

Control the space between child elements using margins.

.space-x-0 { margin-left: 0; margin-right: 0; }
.-space-y-14 { margin-top: -3.5rem; margin-bottom: -3.5rem; }
.space-y-reverse { flex-direction: column-reverse; }

5. TYPOGRAPHY

Font size

text-xs { font-size: 0.75rem; line-height:1rem;}
text-sm {font-size: 0.875re; line-height: 1.25rem}

6. SIZING

7. BACKGROUNDS

8. BORDERS

9. EFFECTS

10. TABLES

11. TRANSFORMS

12. FILTERS

13. SVG

14. TRANSITIONS AND ANIMATION

15. INTERACTIVITY

16. BOX ALIGNMENT

Handling Hover, Focus, and Other States

Tailwind includes modifiers for just about everything you’ll ever need, including:

Hover, focus, and active :

hover : Mouse cursor is over the element. active : Mouse click or touch is pressed down. focus : Element is selected via click or keyboard.

Tailwind also includes modifiers for other interactive states like :visited, :focus-within, :focus-visible, and more.

Software engineer - frontend - backend

First, last, odd, and even

first : Targets the first child of a parent element. last : Targets the last child of a parent element. odd: Targets odd-numbered children in a parent element. even: Targets even-numbered children in a parent element.

Tailwind also includes modifiers for other structural pseudo-classes like :only-child, :first-of-type, :empty, and more.

Form states

required : Targets form elements that have the required attribute. invalid : Targets form elements that are invalid based on HTML5 validation. disabled: Targets form elements that are disabled (i.e., elements that are not interactive and cannot be focused or changed).

Styling based on parent state (group-{modifier})
Styling based on sibling state (peer-{modifier})