Tailwind CSS Cheat Sheet

Tailwind CSS is a utility-first framework that provides a set of ready-made classes to quickly style your web pages. Instead of writing custom CSS, you simply add these small, focused classes directly to your HTML.

This Tailwind CSS cheat sheet gathers hundreds of Tailwind CSS essentials into one easy-to-reference document.

In this article, we will share the PDF of the Tailwind CSS cheatsheet, break down every section of the cheat sheet, explain what each class does, and show you how they work together to build responsive, accessible designs with minimal effort.

TailWind CSS Cheat Sheet

This guide serves as a straightforward introduction to Tailwind CSS, making it easier for you to master its powerful features.

Tailwind CSS Cheat Sheet PDF

Other Posts You May Like

Understanding the Tailwind CSS CheatSheet in Simple Terms

Let’s go through every section of the Tailwind CSS Cheat Sheet in simple terms.

1. Spacing

Tailwind uses a spacing scale to control gaps, margins, paddings, and more. For instance:

  • 0, 0.5, 1, 1.5, 2, … – These numbers represent a predetermined set of spacing values. You apply them to set exact amounts of margin or padding.
  • px – This stands for “pixel.” Use it when you need an exact pixel value (for example, p-px sets a padding of 1 pixel).

Tailwind’s spacing scale lets you apply consistent spacing across your design.

2. Breakpoints

Breakpoints help you change the style of elements for different screen sizes. Tailwind names these breakpoints:

  • <640px .flex – This means that by default (on screens less than 640 pixels wide), the element is styled using the class (flex in this case).
  • 640px .sm:flex, 768px .md:flex, 1024px .lg:flex, 1280px .xl:flex, 1536px .2xl:flex – These classes add styling when the screen is at least the indicated width. They let you switch between styles—for example, by making an element flexible only on larger screens.

3. Pseudo Classes

Pseudo classes let you style elements in specific states. The cheat sheet lists many common ones:

  • hover, focus, active, visited – You use these when the element is hovered over, focused (like when you click into an input), active (being clicked), or has been visited (for links).
  • first, last, only, odd, even – These help style elements based on their order in the HTML.
  • first-of-type, last-of-type, only-of-type, empty, disabled, enabled, etc. – These target elements according to more detailed states (like if an item is the first of its kind or if it has no content).

You add these classes before the utility class to apply styling only in certain conditions.

4. Pseudo Class – Media

These work like media queries. They let you add styles based on the device:

  • sm, md, lg, xl, 2xl – You use these prefixes to apply styles only when the screen meets specific sizes.
  • min-[…] and max-[…] – These let you apply styles for screens above or below certain widths.
  • dark, portrait, landscape, motion-safe, motion-reduce, print – These classes trigger styles based on color mode, orientation, motion preference, and when printing.

They help you create responsive designs that adapt to any device.

5. Pseudo Class – Aria

ARIA classes help you address accessibility. They let you style elements based on ARIA attributes:

  • aria-checked, aria-disabled, aria-expanded, aria-hidden, etc. – Use these when you need to change styling based on accessibility states.

This makes your design more usable for people with disabilities.

6. Functions & Directives

Tailwind uses a few custom CSS directives to integrate with its build process:

  • @tailwind – Loads Tailwind’s base, components, and utilities into your CSS.
  • @apply – Lets you include utility classes into your own CSS rules.
  • @layer – Organizes your CSS into layers (base, components, utilities).
  • @config – Allows you to set up your configuration.
  • theme() & screen() – These functions let you access theme settings and screen breakpoints in your CSS.

They provide the tools to customize and generate your styles.

7. Opacity

Opacity classes adjust how transparent an element is:

  • 0, 5, 10, …, 100 – These numbers represent percentages of opacity. For example, opacity-50 makes an element 50% opaque.

8. Colors

Tailwind offers many color utilities, often with a numeric scale (from 50 to 900) that indicates the shade.

  • Basic numbers (50, 100, 200, …, 900) – These numbers indicate lighter to darker shades of any given color.
  • Color names (slate, gray, zinc, neutral, stone, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, red, orange) – Each color is available in shades from 50 (lightest) to 900 (darkest).

You use these classes to set background colors, text colors, border colors, and more.

9. Flex

Flexbox utilities control flexible layouts:

  • Flex Basis – Use classes like basis-full or basis-1/2 to set the default size of a flex item.
  • Direction – Choose flex-row or flex-col to lay out elements in a row or a column. Reverse these with flex-row-reverse or flex-col-reverse.
  • Wrap – Enable wrapping with flex-wrap (or reverse with flex-wrap-reverse), or force no wrapping with flex-nowrap.
  • Flex – The classes like flex-1, flex-auto, flex-none control how an element grows or shrinks.
  • Grow & Shrink – Use grow/grow-0 to let items grow or not, and shrink/shrink-0 to control shrinking.
  • Order – Change the order of items using order-first, order-last, order-none, or specify an order with order-[1-12].

These classes help you build responsive layouts with minimal custom CSS.

10. Grid

Grid utilities let you create two-dimensional layouts:

  • Grid Template Rows & Columns – Classes like grid-rows-1 to grid-rows-6 and grid-cols-1 to grid-cols-12 set the structure of your grid.
  • Grid Column and Row Spans – col-span-[1-12] and row-span-[1-6] let an element span multiple columns or rows.
  • Grid Auto Flow – Control the default behavior of grid items with classes like grid-flow-row, grid-flow-col, and their dense variants.
  • Grid Auto Sizing – auto-cols-auto and auto-rows-auto adjust columns and rows automatically.

They give you control over complex layouts without writing manual grid CSS.

11. Flex/Grid (Gap, Alignment, and Justification)

This section covers how to create spaces between elements and align them:

  • Gap – Use gap-[$spacing] to set the gap between grid or flex items. You can set horizontal (gap-x-) or vertical (gap-y-) gaps.
  • Justify Content & Items – Classes like justify-start, justify-center, justify-end, justify-between, justify-around, and justify-evenly align content along the main axis. You can also control item alignment with justify-items and justify-self.
  • Align Items & Content – Use items-start, items-end, items-center, items-baseline, and items-stretch to align items on the cross axis. Other classes such as content-center or content-between work on multiple rows or columns.
  • Place Content/Items & Self – These shortcuts combine alignment settings into one: place-content and place-items or place-self let you center or distribute elements easily.

They simplify how you space and align elements in flexible and grid layouts.

12. Background

Tailwind gives you many options to style the background of elements:

  • Background Attachment – bg-fixed, bg-local, and bg-scroll decide how a background image behaves when you scroll.
  • Background Clip – Control how far background color extends with bg-clip-border, bg-clip-padding, bg-clip-content, or even bg-clip-text.
  • Background Color & Gradient – You can set a simple color with classes like bg-white or bg-black, or use gradients that start with a from- value.
  • Background Position – Use bg-center or classes like bg-[left|right|top|bottom] to position the background.
  • Background Image & Repeat – Remove an image with bg-none, set a gradient direction with bg-gradient-to-[direction], or control its repeat behavior.
  • Background Size & Origin – Use bg-auto, bg-cover, bg-contain to size your background. Classes like bg-origin-border set the starting point for the background image.

These utilities let you fully control the appearance of backgrounds.

13. Spacing (Padding and Margin)

Here you set how far elements are separated internally (padding) or externally (margin):

  • Padding – Use p-[$spacing] for uniform padding, or px-, py-, pt-, pr-, pb-, pl- for directional spacing.
  • Margin – Similarly, use m-[$spacing], or directional classes like mx-, my-, mt-, mr-, mb-, and ml-. Prefix with a negative sign (for example, -m-[$spacing]) to create negative margins.
  • Space Between – Use space-[x|y]-[$spacing] to automatically add gaps between elements in a flex or grid container.

They help you position elements precisely.

14. Border

Borders create outlines around elements. Tailwind offers a range of border utilities:

  • Colors – Set the border (or divide, outline, ring) color using classes like border-[color]-[50-900] or use transparent and system colors.
  • Styles – Apply solid, dotted, dashed, or double borders with classes like border-solid, border-dotted, etc.
  • Radius – Round corners with classes like rounded, rounded-sm, rounded-lg, and you can target specific corners or sides.
  • Width – Control the thickness of the border with classes such as border-0, border-2, border-4, etc.
  • Divide, Ring, and Outline – These related utilities add separation lines between elements, outer rings around elements, or custom outlines.

They let you create visually distinct elements without writing custom CSS.

Other Posts You May Like

15. Sizing

Sizing utilities help you control the dimensions of elements:

  • Width & Height – Use w-[$spacing] or h-[$spacing] for spacing-based sizes. You can also set sizes to auto, full (100%), screen (viewport size), or fit (fit-content).
  • Min/Max Sizing – Use min-h-screen or max-w-[full|fit] to set limits on the smallest or largest sizes an element can take.
  • Fractional Values – Classes like w-1/2 or w-[1-11]/12 let you specify a fraction of the container.

They give you precise control over the size of your elements.

16. Typography

Typography utilities let you style text, fonts, and related properties:

  • Font Family – Choose between sans, serif, or mono (font-sans, font-serif, font-mono).
  • Size and Scale – Adjust text size using classes like text-xs, text-base, text-xl, or bigger sizes like 2xl to 9xl.
  • Line Height – Set the space between lines with classes like leading-tight to leading-loose, or use numeric values.
  • Text Alignment – Align text left, right, center, or justify it.
  • Text Transformation – Control the case with uppercase, lowercase, capitalize, or revert to normal-case.
  • Overflow and Decoration – Use classes such as truncate, underline, line-through, or text clipping classes to manage overflow.
  • Font Weight and Style – Choose thin, light, bold, etc., using classes like font-light, font-bold, and set text to italic or not.
  • Letter Spacing and Placeholder Color – Adjust spacing between letters with tracking-[tight|wider|widest] and style placeholder text with placeholder-[color].

These options ensure that your text appears readable and stylistically consistent.

17. Layout

Layout utilities help you control how elements flow and are positioned:

  • Container and Columns – The container class centralizes your content. Use columns to split text into multiple columns.
  • Box Sizing – Classes like box-border and box-content determine whether padding and borders are included in the element’s size.
  • Float and Clear – The float classes position elements to the left or right. The clear classes prevent other elements from wrapping next to them.
  • Positioning – Use static, relative, absolute, fixed, and sticky to control where an element sits.
  • Visibility – Use visible or invisible to show or hide elements without removing them from the layout.
  • Display – Set elements to display as block, inline, flex, grid, table, or hide them completely with hidden.
  • Inset (Top, Right, Bottom, Left) – These classes let you define the offset of an element from its container, using spacing values or fractions.

They simplify the way you create and organize your page layouts.

18. Interactivity

Interactivity utilities focus on user inputs and pointer behavior:

  • Accent and Caret Color – You can set the color of form elements’ accents and caret (cursor inside inputs).
  • Appearance – Use appearance-none to remove the browser’s default styling from elements.
  • Cursor – Change the mouse pointer style using classes like cursor-pointer, cursor-wait, and others.
  • Pointer Events – Enable or disable pointer events with pointer-events-auto or pointer-events-none.
  • Scroll Behavior – Set smooth scrolling with scroll-smooth or adjust scrolling offsets.
  • Overscroll Behavior – Control what happens when a user scrolls past the boundary of an element.
  • Resize and Touch Action – Let users resize elements with resize, or block resizing with resize-none, and manage touch behaviors.

They allow you to enhance the interactive experience without complex JavaScript.

19. Transition & Animation

These classes manage how elements transition or animate:

  • Transitions – Use transition, transition-colors, transition-opacity, etc., to animate CSS property changes smoothly.
  • Duration and Delay – Set the speed and start time using classes like duration-300 or delay-150.
  • Timing Functions – Control the pacing of transitions with ease-linear, ease-in, ease-out, or ease-in-out.
  • Animations – Activate animations with classes such as animate-spin, animate-ping, animate-pulse, or animate-bounce.

They let your design feel lively and dynamic.

20. Transform

Tailwind provides utilities to transform elements:

  • Transform Origin – Set the pivot point of an element with origin-center, origin-top, etc.
  • Scale – Increase or reduce the size of an element using scale-90, scale-100, scale-110, etc.
  • Rotate – Turn elements by a specific angle using classes like rotate-45 or -rotate-45 for negative rotation.
  • Translate – Move an element along the x or y axis with translate-x- or translate-y- classes. You can use fractions and spacing values.
  • Skew – Tilt an element using skew-x- or skew-y- classes to create a slanted look.

They enable you to adjust the element’s shape and position creatively.

21. Filters

Filters adjust visual effects on elements:

  • Brightness and Contrast – Use classes such as brightness-90 or contrast-125 to change how bright or contrasted an element appears.
  • Hue Rotate – Rotate the element’s hue with classes like hue-rotate-90.
  • Saturate and Blur – Increase color intensity with saturate-150 or apply a soft blur effect using blur-lg.
  • Drop Shadow – Use drop-shadow and its variants to create a shadow effect that appears like a drop behind the element.
  • Grayscale, Invert, and Sepia – Remove colors (grayscale), invert them, or add a sepia tone with the corresponding classes.

They let you apply creative visual effects without editing images.

22. Effect

This section covers advanced visual effects:

  • Blend Modes – Use classes like bg-blend-multiply or bg-blend-screen to control how colors blend together.
  • Box Shadow – Apply shadows with classes such as shadow-sm, shadow-md, or shadow-lg to give elements depth.
  • Opacity – You can change an element’s transparency using opacity-[$opacity] classes.

These effects allow you to fine-tune the visual presentation and depth of your elements.

23. Table

Tailwind also helps style HTML tables:

  • Border Collapse and Spacing – Use border-collapse to merge table borders and border-spacing-[$spacing] to add space between table cells.
  • Table Layout – Choose between table-auto (automatic layout) and table-fixed (fixed layout), which helps manage the width and distribution of table columns.

They make it easier to create neat and organized tables.

24. SVG

When working with SVG elements, you can use:

  • Fill and Stroke – Control an SVG’s color using classes like fill-current or stroke-current. You can also choose predefined colors.
  • Stroke Width – Adjust the width of SVG outlines using classes such as stroke-0, stroke-1, or stroke-2.

These utilities give you control over vector graphics styles.

25. Accessibility

Accessibility classes improve usability for people with screen readers:

  • Screen Reader Utilities – Use sr-only to hide an element visually but make it available to screen readers, and not-sr-only to reverse that.

They help ensure your website is accessible to everyone.

Conclusion

The Tailwind CSS Cheat Sheet breaks down the styling process into many small, utility-based classes. You apply these classes directly to your HTML to control spacing, layout, typography, colors, interactivity, effects, and much more.

With this Tailwind CSS cheat sheet, you can create responsive designs and accessible interfaces quickly and consistently without the need for complex custom CSS.

With this explanation, you now have a simple, clear view of what each part of the Tailwing CSS cheat sheet means and how you can use it to style your web projects.

Help Someone By Sharing This Article