Skip to the content

/

Tailwind CSS

Tailwind CSS 4

Tailwind CSS: 0% done

Module 1 · What a web page is made of

A web page is text that a browser reads

Loading the slide…

A line of words about as long as a slide’s first line, and its second.

Another line, shorter.

1 / 178 · What a web page is made of

Course progress

0%

A web page is text that a browser reads
, 1 to practiseHTML is made of elements
, 1 to practiseAttributes add details, and class is the one CSS uses most
, 1 to practiseElements nest inside each other, like a family tree
, 1 to practiseHow a browser goes from files to pixels
, 1 to practiseCSS can live in three places
Developer tools let you look inside any page
Recap

A CSS rule is a selector and some declarations
, 1 to practiseSelectors pick elements by tag, class or position
Many rules can style the same element
, 1 to practiseWhen rules disagree, the cascade picks a winner
, 1 to practiseMore precise selectors beat less precise ones
, 1 to practiseSome properties pass from parent to child
, 1 to practisePseudo-classes style an element in a state
, 1 to practiseMedia queries apply rules only on some screens
Recap

, 1 to practiseEvery element is a box with four layers
, 1 to practisebox-sizing decides what width measures
, 1 to practiseBlock boxes stack, inline boxes flow with text
, 1 to practiseVertical margins between blocks can merge
, 1 to practiseSizes have units: px, rem, em, % and viewport units
, 1 to practiseColours can be written several ways
, 1 to practiseCSS variables store a value under a name
Recap

The usual way: name a thing, then style the name
Utility classes each do one small thing
, 1 to practiseA class name reads as property, then value
, 1 to practiseTailwind reads your files and writes only the CSS you use
, 1 to practiseUtilities are not the same as inline styles
“But the HTML gets long”
, 1 to practisePractice: from CSS to utilities
Recap

Three tools before you start
, 1 to practiseMake a project with Vite
Install Tailwind and plug it into Vite
, 1 to practiseOne line of CSS switches it on
Your first styled element
, 1 to practisePreflight wipes the browser’s default look
Other ways to run Tailwind
, 1 to practiseWhen a class does nothing
Recap

, 1 to practiseOne number drives every space
, 1 to practisePadding: all sides, one axis, or one side
, 1 to practiseMargin pushes things apart, and mx-auto centres
Space between children: gap and space-*
, 1 to practiseWidths and heights
, 1 to practisemax-w-* keeps things readable
, 1 to practiseSquare brackets for a value outside the scale
Recap

Three font families to start with
, 1 to practiseText sizes come with a matching line height
Weight, style and case
, 1 to practiseLine height and letter spacing
, 1 to practiseColour and alignment
, 1 to practiseLong text: truncating, clamping and wrapping well
, 1 to practiseLists and links need their looks back
Using your own font
Recap

A palette of colours, each in eleven shades
, 1 to practiseThe same colour names work on every property
, 1 to practiseA slash sets a colour’s opacity
, 1 to practiseBorders: width, side, style and colour
Rounded corners
, 1 to practiseShadows lift things off the page
, 1 to practiseRings and outlines draw around without taking space
Putting it together: a menu card
, 1 to practiseTry it: a card from a spec
Recap

Flexbox arranges children along a line
, 1 to practiseA row or a column
justify-* spreads items along the main axis
, 1 to practiseitems-* lines items up across the axis
, 1 to practiseLet items wrap onto new lines
, 1 to practiseGrow, shrink and basis share out the space
Building a navigation bar
, 1 to practiseCentring anything
Recap

Grid lays things out in rows and columns at once
, 1 to practisegrid-cols-* sets equal columns
, 1 to practiseItems can span several cells
, 1 to practiseA grid that picks its own number of columns
, 1 to practiseFlex or grid?
, 1 to practiseabsolute places an element over another
, 1 to practiseSticky, fixed, and what sits on top
Recap

The same page, from a phone to a wide monitor
, 1 to practiseMobile first: plain classes for every size, prefixes from a width up
Five breakpoints out of the box
, 1 to practiseShowing and hiding by size
, 1 to practiseRanges and one-off widths
Your own breakpoints live in the theme
, 1 to practiseContainer queries respond to the space a component gets
Container sizes, ranges and names
Recap

A variant is a condition in front of a utility
, 1 to practiseFocus shows where the keyboard is
, 1 to practisePressed, disabled and other element states
, 1 to practisegroup: style a child when its parent is hovered
, 1 to practisepeer: style an element by a sibling’s state
, 1 to practisehas-*, not-* and in-*
, 1 to practiseStyling from data-* and aria-* attributes
, 1 to practiseTry it: a toggle button styled by its state
Parts and positions: placeholder, first, odd, before
Recap

Dark mode follows a setting people choose
, 1 to practisedark: applies a utility in dark mode
Dark mode is not just inverted colours
, 1 to practiseA toggle needs dark: to follow a class
A few lines of JavaScript remember the choice
, 1 to practisePractice: what happens on a visit
, 1 to practiseVariables switch every colour at once
Recap

The parts of a form
, 1 to practiseEvery field needs a real label
Styling an input from scratch
, 1 to practiseValidation states without JavaScript
, 1 to practiseTry it: a field that shows its error
, 1 to practiseCheckboxes, radios and selects
, 1 to practiseAccessibility habits for every component
Respecting contrast and colour settings
, 1 to practisePractice: review a sign-up form
Recap

A transition animates the change between two states
, 1 to practiseTransforms move, scale and rotate without disturbing the layout
Putting it together: a card that lifts
, 1 to practiseAnimations run on their own
, 1 to practiseYour own animation lives in the theme
Animating something as it appears
, 1 to practiseLess motion for people who ask for it
, 1 to practiseAnimate the cheap properties
Recap

A theme is a set of named design decisions
, 1 to practiseThe name’s prefix decides which utilities appear
, 1 to practiseExtending the theme adds to the defaults
, 1 to practiseClearing a namespace replaces the defaults
@theme versus :root
@theme inline for tokens that point to other variables
, 1 to practiseUsing tokens in your own CSS
, 1 to practisePrimitive, semantic and component tokens
Recap

Repetition is fine until it has to change together
A component keeps the classes in one file
, 1 to practiseVariants of a component: map to complete class names
, 1 to practiseTry it: a button with kinds
, 1 to practiseWhen two classes set the same property
, 1 to practise@apply copies utilities into your own CSS
@reference for styles in separate files
, 1 to practiseCascade layers decide before specificity does
Writing into the right layer
Recap

, 1 to practise@utility adds a class that behaves like Tailwind’s own
, 1 to practiseFunctional utilities take a value
, 1 to practise@custom-variant adds a condition
@variant uses a variant inside your own CSS
, 1 to practise@source controls what gets scanned
Plugins, prefixes and the old config file
, 2 to practisePractice: which tool?
Recap

From files to a stylesheet in five steps
, 1 to practiseThe scanner doesn’t understand your code, and doesn’t need to
, 1 to practiseHow a candidate is read
, 1 to practiseWhy the generated order is predictable
, 1 to practiseWhat ends up in the stylesheet
, 1 to practiseUpgrading code written for Tailwind 3
Scaling to a design system
Recap

How to take this module
, 1 to practiseWhich rule wins?
, 1 to practiseRead a responsive layout
, 1 to practiseFind the bug: nested groups
, 1 to practiseBuild a locked-down theme
, 1 to practiseDebug a class that does nothing
, 1 to practiseFind the bug: statuses
, 1 to practiseAccessibility review
, 1 to practiseBuild it: a billing switch
Final project: the coffee shop’s home page
Recap