Utility Classes Cheat Sheet 🎨
A comprehensive list of utility classes to help you build modern, responsive layouts quickly and efficiently. Perfect for developers looking to speed up their workflow with reusable classes. 💡
Layout 🏗️
| Utility Class |
Description |
container |
Centers the content in the viewport. |
block / inline-block |
Defines block-level or inline-block elements. |
flex / grid |
Enables Flexbox or Grid layout. |
flex-col / flex-row |
Sets the flex direction to column or row. |
items-center |
Aligns items vertically to the center. |
justify-center |
Aligns items horizontally to the center. |
gap-1 - gap-12 |
Adds spacing between items (1 to 12 units). |
Spacing 📏
| Utility Class |
Description |
m-{size} |
Sets margin for all sides. Variants: mt, mb, ml, mr for individual sides. |
p-{size} |
Sets padding for all sides. Variants: pt, pb, pl, pr for individual sides. |
{size} options |
Includes values like 0, px, 1 to 96, and others for custom spacing. |
Typography ✍️
| Utility Class |
Description |
text-{size} |
Sets font size (e.g., text-sm, text-lg). |
font-bold / font-medium / font-light |
Defines font weight (bold, medium, light). |
text-left / text-center / text-right |
Aligns text horizontally. |
text-gray-500 |
Applies text color (e.g., gray with shade 500). |
Background 🎨
| Utility Class |
Description |
bg-{color} |
Sets background color (e.g., bg-blue-500). |
bg-gradient-to-r |
Creates a gradient from left to right. |
bg-opacity-{value} |
Adjusts background transparency (e.g., opacity-50). |
Borders 🖌️
| Utility Class |
Description |
border |
Sets a default border width. |
border-{color} |
Specifies border color (e.g., border-red-400). |
rounded / rounded-{size} |
Rounds corners (e.g., rounded-lg). |
Shadows 🌟
| Utility Class |
Description |
shadow-sm |
Applies a small shadow. |
shadow-md |
Applies a medium shadow. |
shadow-lg |
Applies a large shadow. |
shadow-none |
Removes all shadows. |
Sizing 📐
| Utility Class |
Description |
w-{size} / h-{size} |
Sets width/height (e.g., percentages, full, auto). |
max-w-{size} |
Defines the maximum width. |
min-h-{size} |
Defines the minimum height. |
Flexbox Alignment 🤹
| Utility Class |
Description |
justify-start |
Aligns items at the start horizontally. |
justify-between |
Creates even spacing between items. |
items-start |
Aligns items at the top vertically. |
Positioning 📌
| Utility Class |
Description |
absolute / relative |
Sets positioning mode to absolute or relative. |
top-{value} / left-{value} |
Defines offset values. |
z-{value} |
Sets the Z-index for stacking elements. |
Colors 🌈
| Utility Class Example |
Description |
text-blue-500 |
Applies blue text color. |
bg-green-300 |
Sets a green background color. |
border-red-400 |
Creates a red border color. |
Transitions & Animations 🎬
| Utility Class |
Description |
transition |
Enables smooth transitions between states. |
duration-{ms} |
Sets the transition duration (e.g., duration-300). |
ease-in / ease-out |
Defines timing functions for transitions. |
animate-bounce |
Adds a bounce animation effect. |
✨ Use this cheat sheet to enhance your project’s development and styling efficiency! 🚀
Contributions are welcome! Feel free to open an issue or submit a pull request. 💬
