Scribd
Upload
88 views2 pages

Tailwind Css Cheatsheet

This document is a cheat sheet for Tailwind CSS, outlining various utility classes for layout, flexbox, grid, spacing, sizing, typography, colors, borders, effects, transitions, interactivity, positioning, and responsive design. It provides a quick reference for developers to utilize Tailwind CSS effectively in their projects. Each section lists relevant classes that can be applied to HTML elements.

Uploaded by

okekegabriel84
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
88 views2 pages

Tailwind Css Cheatsheet

This document is a cheat sheet for Tailwind CSS, outlining various utility classes for layout, flexbox, grid, spacing, sizing, typography, colors, borders, effects, transitions, interactivity, positioning, and responsive design. It provides a quick reference for developers to utilize Tailwind CSS effectively in their projects. Each section lists relevant classes that can be applied to HTML elements.

Uploaded by

okekegabriel84
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

TAILWIND CSS CHEAT SHEET

=== Layout ===

container, box-border, box-content, block, inline-block, inline, flex, inline-flex, grid, hidden

=== Flexbox & Grid ===

flex, flex-row, flex-col, items-start, items-center, items-end, justify-start, justify-center, gap-2,

grid-cols-3, col-span-2

=== Spacing (Margin & Padding) ===

m-4, mx-2, my-1, p-3, px-6, py-2, space-x-4, space-y-3

=== Sizing ===

w-full, w-screen, w-1/2, max-w-md, h-32, h-screen, min-h-full

=== Typography ===

text-left, text-center, text-right, text-sm, text-lg, font-bold, font-light, leading-tight, tracking-wide,

line-clamp-3

=== Colors ===

text-blue-500, bg-yellow-300, border-red-400, placeholder-gray-400

=== Borders & Radius ===

border, border-2, border-dashed, rounded, rounded-lg, rounded-full

=== Effects ===


shadow, shadow-md, shadow-lg, opacity-50, blur, backdrop-blur, mix-blend-multiply

=== Transitions & Animation ===

transition, duration-300, ease-in-out, animate-bounce, animate-spin

=== Interactivity ===

hover:bg-blue-500, focus:outline-none, active:scale-95, cursor-pointer, select-none

=== Positioning ===

relative, absolute, top-0, left-0, z-10, inset-4

=== Responsive Design ===

sm:, md:, lg:, xl:, 2xl:

You might also like