Contents
Tailwind CSS
A utility-first CSS framework: style with classes right in HTML, with themes and responsiveness.
1.Getting started
- What is Tailwind CSSThe utility-first approach, how Tailwind differs from plain CSS and Bootstrap, and what the course covers.
- Tailwind in the browserHow to try Tailwind with a single script tag, what Preflight is, and why real projects do not work this way.
- Installing with ViteHow to create a Vite project and add Tailwind CSS 4 with the @tailwindcss/vite plugin.
- Installing with the CLIHow to build CSS with the @tailwindcss/cli tool without a bundler: input file, output file and watch mode.
- How class names are builtThe property-value pattern, the spacing scale, sides, negative values and modifiers in Tailwind class names.
2.Styling elements
- Colors and opacityThe Tailwind palette, shades from 50 to 950, text, background and border colors, and the opacity modifier.
- Text and fontsFont size, weight and family, line height, alignment and truncating long text in Tailwind.
- Spacing and sizingPadding, margins, space between siblings, width, height, max width and size-* in Tailwind.
- Borders, rounded corners and shadowsBorder width and color, dividers, rounded corners, shadows and ring outlines in Tailwind.
- Backgrounds and gradientsBackground color, background images, their size and position, linear and radial gradients in Tailwind 4.
3.Layout and responsiveness
- FlexboxTailwind classes for flex layout: direction, gaps, alignment, wrapping and growing items.
- GridGrids in Tailwind: columns, gaps, and spanning a cell over several columns and rows.
- Responsive design with breakpoint prefixesMobile-first in Tailwind: the sm, md, lg, xl, 2xl prefixes, max-* ranges and a responsive product grid.
- Container queriesHow Tailwind 4 changes layout based on the parent width: the @container class, the @sm, @md, @lg variants and named containers.
4.States, dark mode and animation
- Hover, focus and other statesThe hover, focus, focus-visible, active, disabled, first, last and odd variants, and how to combine them with breakpoints.
- Group and peer variantsHow to style an element by the state of its parent (group-hover) or a sibling (peer-checked, peer-invalid) in Tailwind.
- Dark modeThe dark variant in Tailwind: following the system setting, or a toggle based on a class or data attribute with @custom-variant.
- Transitions, transforms and animationsThe transition, duration and ease classes, the scale, rotate and translate transforms, ready animations and your own animation with @theme.
5.Customization and extensions
- Arbitrary values and propertiesSquare brackets in Tailwind classes: any size or color, CSS variables, arbitrary properties and variants.
- Customising the theme with @themeYour own colors, fonts and breakpoints in Tailwind 4: the @theme directive, variable namespaces and replacing the default palette.
- Custom utilities and componentsThe @utility, @layer components and @apply directives in Tailwind 4, and why not to move your whole layout into @apply.
- Styling formsInputs, selects, checkboxes and buttons in Tailwind: focus, errors, accent color, file: and the @tailwindcss/forms plugin.
- The typography plugin for long textThe prose classes from the @tailwindcss/typography plugin: styling articles and descriptions from Markdown or a CMS with one class.
6.Practice
- Reusing stylesHow to avoid copying long class lists: loops, React and Vue template components, backend partials.
- Organising long class listsHow to read and order long class attributes: group order, line breaks, the Prettier plugin for sorting, and conditional classes.
- Building a landing page section by sectionAssembling a shop page with Tailwind: header, hero, product grid, call to action and footer.
- A shop dashboardBuilding an admin dashboard with Tailwind: a sidebar menu, stat tiles and a responsive orders table.
- Production buildHow Tailwind finds the classes you use, why the final CSS has nothing extra, the @source directive, and building with Vite and the CLI.