Tailwind CSS

What's inside

Lessons go from the basics to advanced topics. Read them in order, or jump to what you need.

1. 01

   Chapter 1

   Getting Started

   • 1Tailwind CSS IntroductionMeet Tailwind CSS, the framework that lets you build polished interfaces by composing small utility classes right in your HTML — and see how it compares with plain CSS and Bootstrap.
   • 2Installation and SetupLearn the ways to run Tailwind — the Play CDN for quick experiments, the Tailwind CLI and a Vite install — then understand the role of tailwind.config.js and the @tailwind directives.
   • 3How Utility Classes WorkUnderstand how a class name maps to the CSS it generates, the anatomy of classes with variants, how utilities compose into a full component, and what Preflight does.
2. 02

   Chapter 2

   Core Utilities

   • 4ColorsUse Tailwind's built-in palette, with shades from 50 to 950, to color text, backgrounds and borders — and control opacity with the slash syntax, like bg-sky-500/50.
   • 5TypographyControl font size and weight, line height and letter spacing, alignment and decoration, and truncating long text — with tips for Arabic text.
   • 6Spacing: Padding and MarginControl the space inside and around elements with p- and m- classes: the spacing scale, choosing sides, negative values, centering with mx-auto, and space between children with space- and gap-.
   • 7Sizing: Width and HeightSet element width and height with fixed, relative or viewport-based values, use max-w-* to build responsive cards, and size-* to set width and height together.
   • 8Borders, Radius and RingsAdd borders with the width, color and style you choose, round corners with rounded-*, use ring-* rings to highlight elements and focus states, and divide-* to separate list items.
   • 9Shadows and OpacityGive elements depth with the shadow scale from shadow-sm to shadow-2xl and colored shadows, control element transparency with opacity-*, and learn when to use color opacity instead.
   • 10Backgrounds and GradientsCreate eye-catching gradients with bg-gradient-to-*, from-, via- and to-, fill text with gradients, control background images, and build a frosted-glass effect.
3. 03

   Chapter 3

   Layout

   • 11Display and PositioningControl how elements display with block, inline-block and hidden, place them precisely with relative, absolute, fixed and sticky, and stack layers with z-*.
   • 12FlexboxArrange items in a row or column with Flexbox classes — direction, distribution, alignment, wrapping and gaps — and control how each item grows with classes like flex-1 and shrink-0.
   • 13GridBuild layouts of rows and columns with Grid classes: set the number of columns, let items span several columns or rows, and create grids that adapt to the screen width automatically.
   • 14Container and CenteringControl your page's content width with the container class or max-w-* with mx-auto, and learn the five most common ways to center elements horizontally and vertically.
4. 04

   Chapter 4

   Responsive & States

   • 15Responsive DesignMake your design work on phones and desktops alike with the breakpoint variants sm:, md:, lg:, xl: and 2xl:, and understand the mobile-first approach Tailwind is built on.
   • 16Hover, Focus and Other StatesStyle elements by state with variants like hover:, focus:, active: and disabled:, style children based on their parent's state with group, and elements based on a sibling's state with peer.
   • 17Dark ModeAdd a dark mode to your site with the dark: variant, and choose between following the user's system setting automatically or a manual toggle with the darkMode: 'class' setting.
   • 18RTL and Arabic SupportBuild interfaces that work in both Arabic and English: use logical classes like ms-, pe-, start- and text-start that flip automatically, and the rtl: and ltr: variants for everything else.
   • 19Transitions and AnimationsBring your interface to life with smooth transitions between states using transition and duration-*, transforms like scale, rotate and translate, and ready-made animations like animate-spin and animate-pulse — while respecting reduced-motion preferences.
5. 05

   Chapter 5

   Building UI

   • 20Common UI PatternsPut everything together to build the most common interface components with Tailwind: button variants, cards, a responsive navbar and forms.
   • 21Customizing the ThemeMake Tailwind match your project's identity: add your own colors, fonts and spacing in theme.extend, understand extending vs replacing, and use arbitrary values like w-[37px] when needed.
   • 22@apply and @layerBundle repeated utilities into a single class with @apply, organize your custom styles into Tailwind's three layers with @layer, and learn when that helps and when it hurts.
   • 23Best PracticesWrite clean, maintainable Tailwind code: order your classes, extract components instead of repeating yourself, write complete class names, avoid conflicts, and care about accessibility and performance.
   • 24Project: Pricing PageBuild a professional, responsive pricing page step by step: the section header, a plan card, then a full grid with a featured plan and a monthly/yearly billing switch.