Title here
Summary here
Tailwind CSS
Visit official Tailwind CSS website for more info.
Utility Classes
A packed cheatsheet for Tailwind CSS.
<!-- Layouting -->
<div className="flex flex-col items-center justify-center bg-white dark:bg-gray-800"></div>
<div className="grid grid-cols-3 gap-4 hidden text-xl"></div>
<!-- Positioning -->
<div className="relative mx-auto w-full max-w-[400px] space-y-2.5 md:-mt-32"></div>
<div className="leading-loose order-2 group space-x-1"></div>
<!-- Styling -->
<div className="bg-gradient-to-r to-pink-500 from-violet-600 text-white active:rounded-lg focus:shadow-sm hover:border-blue-400"></div>
<!-- Animation -->
<div className="transition-all hover:bg-blue-700 duration-300 ease-in-out"></div>md:h-screen: on medium and up, element height is 100vhmax-w-[400px]: max width is 400pxspace-y-2.5: Adds vertical spacing between child elementsmd:-mt-32: Apply negative top marginleading-loose: Control line height to looseorder-2: Put as second orderspace: Adds space between siblings, without margin on first/lasttransition-all: Smooth transition for all propertiesgroup: A wrapper class to apply hover/focus/whatever styles to child elements
Breakpoints
| Prefix | Applies at | Devices |
|---|---|---|
| sm | ≥ 640px | Large phone / small tablet (potrait) |
| md | ≥ 768px | Tablet (potrait), phone (landscape) |
| lg | ≥ 1024px | Laptop / tablets (landscape) |
| xl | ≥ 1280px | Desktop |
| 2xl | ≥ 1536px | Large desktop |