Tailwind CSS: Complete Course

What is Tailwind CSS and how does utility-first CSS work

utility-first philosophy, inline styling vs utility classes, Tailwind vs Bootstrap, atomic CSS, class composition, no custom CSS needed

How to install Tailwind CSS with Vite or CDN

Tailwind CDN setup, npm install, Vite integration, PostCSS config, tailwind.config.js, @tailwind directives, content paths

Tailwind spacing, sizing, and color system explained

spacing scale, rem-based units, color palette, numeric scale, padding margin classes, width height classes, default color tokens

Typography utilities in Tailwind CSS

font-size classes, font-weight, line-height, text alignment, text color, letter-spacing, font-family, text decoration, text transform

Tailwind CSS hover, focus, and state variants

hover variant, focus variant, active variant, disabled variant, variant syntax, stacking variants, focus-visible, group modifier

Tailwind Flexbox utilities: flex, justify, align explained

flex container, flex-row, flex-col, justify-content, align-items, flex-wrap, flex-1, gap utilities, flex-shrink, flex-grow

CSS Grid in Tailwind: columns, rows, and template areas

grid container, grid-cols utilities, col-span, row-span, gap, auto-rows, grid-flow, place-items, arbitrary grid templates

How to center elements vertically and horizontally in Tailwind

flex centering, grid place-items-center, absolute centering, margin auto, translate centering, full-screen centering, button centering

Tailwind position utilities: relative, absolute, sticky, fixed

relative positioning, absolute positioning, fixed positioning, sticky positioning, inset utilities, z-index classes, top right bottom left classes, overflow hidden

Building a responsive navbar with Tailwind Flexbox

navbar layout pattern, logo and links, flex justify-between, responsive display classes, hover states on nav links, mobile hamburger pattern

How Tailwind responsive breakpoints work: sm, md, lg, xl

mobile-first breakpoints, sm md lg xl 2xl, min-width behavior, breakpoint prefix syntax, overriding at breakpoints, responsive utility pattern

Responsive typography and spacing in Tailwind

responsive text size, responsive font-weight, responsive padding, responsive margin, responsive max-width, responsive leading

Responsive show and hide elements with Tailwind display classes

hidden class, block class, inline-flex, responsive display, mobile hamburger menu, desktop link show/hide, responsive flex direction

Responsive images and aspect ratios in Tailwind

w-full responsive images, aspect-ratio utilities, object-fit, object-cover, object-contain, aspect-video, aspect-square, responsive image containers

Container class and responsive layout containers in Tailwind

container class, container centering, max-width per breakpoint, custom container config, prose container, full-bleed sections

Building reusable button components with Tailwind variants

button base styles, primary secondary ghost variants, size variants, disabled state, focus ring accessibility, icon buttons

Tailwind card component patterns for product and content cards

card base structure, image cards, horizontal cards, card with badge, card footer, hover lift effect, shadow variants, line-clamp

Styling HTML forms with Tailwind CSS

input base styles, label styling, focus states, select styling, textarea, form layout, error states, disabled inputs, space-y spacing

Building a modal overlay with Tailwind CSS

fixed overlay, backdrop, modal dialog, z-index layers, modal close button, modal sizing, scroll within modal, header body footer structure

Tailwind badge, tag, and pill component patterns

badge component, status badges, removable tags, pill shape, color variants, dot indicator, notification count badge, inline badges

How to customize Tailwind with tailwind.config.js theme extension

theme.extend vs theme override, custom colors, custom spacing, custom fonts, custom breakpoints, custom shadows, config merge behavior, design tokens

Tailwind dark mode: class strategy vs media strategy

darkMode class config, darkMode media config, dark: prefix, toggling dark class on html element, dark mode color pairs, dark mode localStorage, system preference

Tailwind arbitrary values: writing custom CSS inside utility classes

arbitrary value syntax, bracket notation, custom colors, custom spacing, custom grid templates, arbitrary variants, CSS properties in arbitrary values, when to use

Using @apply in Tailwind to extract component classes

@apply directive, component extraction, when to use @apply, CSS layer, @layer components, base styles, @apply limitations, anti-patterns

Tailwind CSS variables and design tokens with CSS custom properties

CSS custom properties in Tailwind, var() in arbitrary values, theme() function, CSS variables for theming, dynamic theming, alpha-value placeholder

Tailwind transitions and how to animate UI state changes

transition class, transition-all, transition duration, transition timing, ease-in ease-out, delay, transform utilities, hover transitions

Tailwind CSS animations: animate-spin, pulse, bounce, and custom keyframes

animate-spin, animate-pulse, animate-bounce, animate-ping, animate-none, custom keyframes in config, animation delay, loading states, skeleton screens

Tailwind peer modifier: styling siblings based on input state

peer modifier, peer-checked, peer-focus, peer-invalid, floating label pattern, custom checkbox, toggle switch, peer-placeholder-shown, sr-only

Tailwind CSS plugins: typography, forms, and container queries

@tailwindcss/typography plugin, prose class, @tailwindcss/forms plugin, @tailwindcss/container-queries, container query syntax, installing plugins, prose-invert

Building a complete SaaS landing page with Tailwind CSS

page structure, hero section, features grid, testimonials, pricing section, footer, responsive layout, dark mode integration, consistent design tokens, component composition