Scribd
Upload
71 views14 pages

Tailwind CSS Cheatsheet

The Tailwind CSS Cheatsheet provides essential utilities for styling directly within HTML, enhancing the design process by minimizing custom CSS. It covers key classes for layout, typography, responsive design, and interactive states, making it easier to create modern and efficient web projects. This resource aims to help users master Tailwind CSS and improve their styling workflow.

Uploaded by

yusufkamil990
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
71 views14 pages

Tailwind CSS Cheatsheet

The Tailwind CSS Cheatsheet provides essential utilities for styling directly within HTML, enhancing the design process by minimizing custom CSS. It covers key classes for layout, typography, responsive design, and interactive states, making it easier to create modern and efficient web projects. This resource aims to help users master Tailwind CSS and improve their styling workflow.

Uploaded by

yusufkamil990
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

Ram Maheshwari

@rammcodes
Tailwind CSS is a utility-first framework that allows you
to style directly within your HTML, cutting down on
custom CSS and speeding up the design process.

This Tailwind CSS Cheatsheet is here to help you


master key utilities—from layout and typography to
interactive states and dark mode.

Swipe through to level up your Tailwind skills and


streamline your styling workflow! 👉
Use text-lg for font size, font-bold for bold text, and
text-gray-800 for color.
Use flex to create a flex container, justify-center
centers horizontally, and items-center centers
vertically.
Using grid makes a grid layout, grid-cols-2 sets two
columns, and gap-4 adds spacing.
The m-4 class adds margin, and p-6 adds padding for
an easy spacing setup.
The bg-blue-500 class sets a blue background,
border-gray-300 for border color, and rounded-lg for
rounded corners.
Responsive font sizes: text-xs, text-sm, text-md, and
text-lg adjust font size automatically at various
screen sizes to keep text readable across devices.
Change button color based on interaction:
hover:bg-gray-700, focus:bg-gray-600, and
active:bg-gray-500.
The relative class creates a containing context, and
absolute positions the inner div at the top-0 i.e 0
pixels away from top & right-0 i.e 0 pixels away from
right.
The shadow-lg class is used for a large shadow, and
the other class opacity-75 is used to make the
element partially transparent.
The dark:bg-black and dark:text-white adapt styles
when dark mode is active.
With Tailwind CSS, styling your web projects becomes
faster and more efficient, helping you create responsive
and modern designs without writing lengthy CSS.

This cheatsheet gives you a quick look at essential


Tailwind classes to streamline your development
process 🔥
Ram Maheshwari
@rammcodes

You might also like