Tailwind CSS Cheatsheet

• Tailwind CSS (tailwindcss.com)
• Official Documentation
• Tailwind UI Components

npm install -D tailwindcss
npx tailwindcss init

Install Tailwind CSS via npm and initialize config.

<div class="px-6 py-2">Padding x/y</div>
<div class="mt-8 mb-4">Margin top/bottom</div>
<div class="space-x-4">Space between children</div>

<div class="text-blue-500 bg-red-100">Text & background</div>
<div class="border-green-300 ring-2 ring-blue-500">Border & ring</div>
<div class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">Gradient text</div>

<h1 class="text-4xl font-bold tracking-wide">Heading</h1>
<p class="text-lg leading-relaxed text-gray-600">Paragraph</p>
<span class="text-sm font-medium uppercase tracking-wider">Label</span>
<div class="text-center italic underline decoration-2">Styled text</div>

<div class="container mx-auto">Centered container</div>
<div class="block">Block element</div>
<span class="inline-block">Inline block</span>
<div class="hidden">Hidden element</div>

<div class="flex">Flex container</div>
<div class="flex justify-center">Center items</div>
<div class="flex items-center">Align center</div>
<div class="flex-col">Column direction</div>

<div class="grid">Grid container</div>
<div class="grid-cols-3">3 columns</div>
<div class="grid-rows-2">2 rows</div>
<div class="gap-4">Grid gap</div>

<div class="border">Default border</div>
<div class="border-2 border-red-500">Red border</div>
<div class="rounded-lg">Rounded corners</div>
<div class="border-t-4">Top border only</div>

<div class="bg-blue-500">Solid background</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">Gradient</div>
<div class="bg-opacity-50">Background opacity</div>
<div class="bg-cover bg-center">Background image</div>

<div class="shadow-lg">Large shadow</div>
<div class="opacity-75">75% opacity</div>
<div class="blur-sm">Blur effect</div>
<div class="backdrop-blur-md">Backdrop blur</div>

<div class="scale-110">Scale up 10%</div>
<div class="rotate-45">Rotate 45°</div>
<div class="translate-x-4">Move right</div>
<div class="skew-y-12">Skew Y axis</div>

<div class="transition">Default transition</div>
<div class="duration-300">300ms duration</div>
<div class="ease-in-out">Easing function</div>
<div class="hover:scale-105">Hover effect</div>

<div class="md:flex">Flex on medium+</div>
<div class="lg:text-2xl">Large text on large+</div>
<div class="sm:hidden">Hidden on small+</div>
<div class="xl:grid-cols-4">4 cols on xl+</div>

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
      }
    }
  },
  plugins: []
}

Customize Tailwind with tailwind.config.js

<div class="relative">Relative positioning</div>
<div class="absolute top-0 right-0">Absolute</div>
<div class="fixed bottom-4 left-4">Fixed</div>
<div class="sticky top-0">Sticky</div>

<div class="w-full h-screen">Full width/height</div>
<div class="w-64 h-32">Fixed dimensions</div>
<div class="min-h-screen">Min height</div>
<div class="max-w-md">Max width</div>

<button class="hover:bg-blue-600">Hover effect</button>
<input class="focus:ring-2 focus:ring-blue-500">
<div class="active:scale-95">Active state</div>
<div class="group-hover:text-white">Group hover</div>

<div class="dark:bg-gray-900">Dark background</div>
<div class="dark:text-white">Dark text</div>
<div class="dark:border-gray-700">Dark border</div>
<div class="dark:hover:bg-gray-800">Dark hover</div>

<button class="focus:outline-none focus:ring-2">Focus styles</button>
<div class="sr-only">Screen reader only</div>
<div class="not-sr-only">Not screen reader only</div>
<div class="motion-reduce:motion-none">Reduce motion</div>

<div class="animate-spin">Spinning animation</div>
<div class="animate-pulse">Pulse animation</div>
<div class="animate-bounce">Bounce animation</div>
<div class="animate-ping">Ping animation</div>

<div class="overflow-hidden">Hide overflow</div>
<div class="z-10">Z-index</div>
<div class="cursor-pointer">Pointer cursor</div>
<div class="select-none">No text selection</div>