Tailwind CSS Utility Classes Cheat Sheet

0 0

Tailwind CSS is a utility-first framework that allows developers to create responsive and customizable designs with ease. By using predefined utility classes, you can quickly style your HTML elements without writing custom CSS. This cheat sheet covers the most commonly used Tailwind CSS utility classes for layout, spacing, typography, backgrounds, borders, effects, and more.

1. Layout

• Container:
  • container: Centers content and applies max-width at breakpoints.
• Flexbox:
  • flex: Applies a flex container.
  • flex-row: Horizontal layout (default).
  • flex-col: Vertical layout.
  • items-center: Center items on the cross-axis.
  • justify-center: Center items on the main axis.
  • space-x-{size}: Horizontal space between flex items.
  • space-y-{size}: Vertical space between flex items.
• Grid:
  • grid: Applies a grid container.
  • grid-cols-{n}: Sets the number of columns.
  • grid-rows-{n}: Sets the number of rows.
  • gap-{size}: Sets the gap between grid items.

2. Spacing

• Margin:
  • m-{size}: Margin on all sides.
  • mt-{size}: Margin-top.
  • mb-{size}: Margin-bottom.
  • ml-{size}: Margin-left.
  • mr-{size}: Margin-right.
• Padding:
  • p-{size}: Padding on all sides.
  • pt-{size}: Padding-top.
  • pb-{size}: Padding-bottom.
  • pl-{size}: Padding-left.
  • pr-{size}: Padding-right.

3. Typography

• Text Size:
  • text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, etc.
• Font Weight:
  • font-light, font-normal, font-semibold, font-bold.
• Text Color:
  • text-gray-500, text-blue-600, text-red-400, etc.
• Text Alignment:
  • text-left, text-center, text-right.
• Text Transformation:
  • uppercase, lowercase, capitalize.
• Line Height:
  • leading-none, leading-tight, leading-relaxed, leading-loose.

4. Backgrounds

• Background Color:
  • bg-gray-200, bg-blue-500, bg-red-700, etc.
• Background Image:
  • bg-cover: Ensures the background image covers the container.
  • bg-contain: Makes the background image fit within the container.
• Background Position:
  • bg-center, bg-top, bg-bottom, bg-left, bg-right.

5. Borders

• Border Width:
  • border, border-2, border-4.
• Border Radius:
  • rounded, rounded-sm, rounded-lg, rounded-full.
• Border Color:
  • border-gray-400, border-blue-600, etc.

6. Effects

• Box Shadow:
  • shadow-sm, shadow, shadow-lg, shadow-xl, shadow-2xl.
• Opacity:
  • opacity-0, opacity-25, opacity-50, opacity-75, opacity-100.
• Visibility:
  • visible, invisible.

7. Positioning

• Position:
  • relative, absolute, fixed, sticky, static.
• Top/Right/Bottom/Left:
  • top-{size}, right-{size}, bottom-{size}, left-{size}.
• Z-Index:
  • z-10, z-20, z-30, etc.

8. Sizing

• Width/Height:
  • w-{size}, h-{size}.
  • w-full, h-full: Full width or height.
  • w-auto, h-auto: Auto width or height.
• Min/Max Width/Height:
  • min-w-{size}, max-w-{size}.
  • min-h-{size}, max-h-{size}.

9. Display

• Display Types:
  • block, inline-block, inline, hidden.

10. Responsiveness

• Breakpoints:
  • sm, md, lg, xl, 2xl: Tailwind’s responsive breakpoints.
  • Example: sm:w-full, lg:text-3xl.

11. Lists & Tables

• List Styles:
  • list-none: Removes list style.
  • list-disc: Disc style list.
  • list-decimal: Decimal style list.
• Table Layout:
  • table-auto, table-fixed: Controls the table layout.

12. Miscellaneous

• Cursor:
  • cursor-pointer, cursor-default, cursor-not-allowed.
• Pointer Events:
  • pointer-events-none, pointer-events-auto.
• Text Overflow:
  • truncate: Adds an ellipsis to overflowing text.
  • overflow-ellipsis: Adds ellipsis for overflowed content.

Conclusion

This Tailwind CSS utility classes cheat sheet provides a quick reference for developers to style their websites or applications efficiently. By mastering these utility classes, you can design responsive, customizable, and maintainable web pages without writing custom CSS.

About Post Author

Vicky Chhetri

developer@vickychhetri.com

https://vickychhetri.com/

Happy

3 75 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

1 25 %

About Author

Vicky Chhetri

See author's posts