Tailwind CSS Utilities Cheatsheet
Quick reference for Tailwind CSS: layout, spacing, typography, colors, flexbox, grid, and responsive utilities.
| Feature | Description | Example | Category |
|---|---|---|---|
| Container | Responsive container | <div class="container mx-auto">Content</div> | Layout |
| Display | Control display property | class="block" class="inline-block" class="hidden" | Layout |
| Position | Positioning elements | class="relative" class="absolute" class="fixed" | Layout |
| Z-Index | Control stack order | class="z-0" class="z-10" class="z-50" | Layout |
| Overflow | Handle overflow content | class="overflow-auto" class="overflow-hidden" class="overflow-scroll" | Layout |
| Padding | Add padding to elements | class="p-4" class="px-6 py-2" class="pt-8" | Spacing |
| Margin | Add margin to elements | class="m-4" class="mx-auto" class="mt-6 mb-4" | Spacing |
| Space Between | Space between child elements | class="space-x-4" class="space-y-2" | Spacing |
| Gap | Grid/flex gap spacing | class="gap-4" class="gap-x-6 gap-y-2" | Spacing |
| Font Size | Control text size | class="text-xs" class="text-base" class="text-4xl" | Typography |
| Font Weight | Control font weight | class="font-light" class="font-normal" class="font-bold" | Typography |
| Text Align | Align text content | class="text-left" class="text-center" class="text-right" | Typography |
| Text Color | Set text color | class="text-gray-500" class="text-blue-600" class="text-red-400" | Typography |
| Line Height | Control line spacing | class="leading-none" class="leading-tight" class="leading-loose" | Typography |
| Text Transform | Transform text case | class="uppercase" class="lowercase" class="capitalize" | Typography |
| Background | Background color classes | class="bg-white" class="bg-gray-100" class="bg-blue-500" | Colors |
| Border Color | Border color utilities | class="border-gray-300" class="border-red-500" | Colors |
| Opacity | Control element opacity | class="opacity-0" class="opacity-50" class="opacity-100" | Colors |
| Gradient | Background gradients | class="bg-gradient-to-r from-blue-500 to-purple-600" | Colors |
| Flex Container | Create flex container | class="flex" class="inline-flex" | Flexbox |
| Flex Direction | Set flex direction | class="flex-row" class="flex-col" class="flex-row-reverse" | Flexbox |
| Justify Content | Align items along main axis | class="justify-start" class="justify-center" class="justify-between" | Flexbox |
| Align Items | Align items along cross axis | class="items-start" class="items-center" class="items-stretch" | Flexbox |
| Flex Wrap | Control flex wrapping | class="flex-wrap" class="flex-nowrap" | Flexbox |
| Flex Grow/Shrink | Control flex item sizing | class="flex-1" class="flex-grow" class="flex-shrink-0" | Flexbox |
| Grid Container | Create grid container | class="grid" | Grid |
| Grid Columns | Define grid columns | class="grid-cols-1" class="grid-cols-3" class="grid-cols-12" | Grid |
| Grid Rows | Define grid rows | class="grid-rows-2" class="grid-rows-4" | Grid |
| Column Span | Span multiple columns | class="col-span-2" class="col-span-full" | Grid |
| Row Span | Span multiple rows | class="row-span-2" class="row-span-3" | Grid |
| Breakpoints | Responsive design prefixes | class="sm:text-base md:text-lg lg:text-xl" | Responsive |
| Mobile First | Base styles for mobile | class="w-full md:w-1/2 lg:w-1/3" | Responsive |
| Hide/Show | Responsive visibility | class="hidden md:block" class="block md:hidden" | Responsive |
| Shadow | Box shadow utilities | class="shadow-sm" class="shadow-md" class="shadow-2xl" | Effects |
| Rounded | Border radius utilities | class="rounded" class="rounded-lg" class="rounded-full" | Effects |
| Border | Border width utilities | class="border" class="border-2" class="border-t-4" | Effects |
| Hover | Hover state modifiers | class="hover:bg-blue-600" class="hover:scale-105" | Effects |
| Transition | Transition effects | class="transition duration-300 ease-in-out" | Effects |
| Transform | Transform utilities | class="scale-110" class="rotate-45" class="translate-x-4" | Effects |