DEV Community

Cover image for Tailwind CSS Cheatsheet
Bryan N. Lomerio
Bryan N. Lomerio

Posted on

8

Tailwind CSS Cheatsheet

Layout

Utility Class Description
container Centers the content.
block / inline-block Block-level or inline-block.
flex / grid Flexbox or Grid layout.
flex-col / flex-row Flex direction column/row.
items-center Align items vertically.
justify-center Align items horizontally.
gap-1 - gap-12 Spacing between items.

Spacing

Utility Class Description
m-{size} Margin: mt, mb, ml, mr.
p-{size} Padding: pt, pb, pl, pr.
{size} options 0, px, 1 - 96, etc.

Typography

Utility Class Description
text-{size} Font size (e.g., text-sm).
font-bold Bold text.
font-medium Medium text.
font-light Light text.
text-left / text-center / text-right Text alignment.
text-gray-500 Text color.

Background

Utility Class Description
bg-{color} Background color.
bg-gradient-to-r Gradient from left to right.
bg-opacity-{value} Background transparency.

Borders

Utility Class Description
border Default border width.
border-{color} Border color.
rounded / rounded-{size} Rounded corners.

Shadows

Utility Class Description
shadow-sm Small shadow.
shadow-md Medium shadow.
shadow-lg Large shadow.
shadow-none No shadow.

Sizing

Utility Class Description
w-{size} / h-{size} Width/Height (full, auto, percentages).
max-w-{size} Maximum width.
min-h-{size} Minimum height.

Flexbox Alignment

Utility Class Description
justify-start Align items at the start.
justify-between Space between items.
items-start Align items top.

Positioning

Utility Class Description
absolute / relative Positioning modes.
top-{value} / left-{value} Offset values.
z-{value} Z-index (stacking).

Colors

Class Examples Description
text-blue-500 Blue text color.
bg-green-300 Green background color.
border-red-400 Red border color.

Transitions & Animation

Utility Class Description
transition Enables transitions.
duration-{ms} Duration of transitions.
ease-in / ease-out Timing functions.
animate-bounce Bounce animation.

Billboard image

Monitor more than uptime.

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay