14 Material Design Components in Tailwind CSS

The label sits inside the field as a placeholder, then moves up and shrinks once the field has focus or a value. In these demos that motion is pure CSS: the label is a real <label> positioned over the input, reacting to the input's :focus and :not(:placeholder-shown) states through Tailwind's peer utilities. Give the input a peer class and an empty placeholder=" " attribute so :placeholder-shown is meaningful, then style the label with peer-focus: and peer-[:not(:placeholder-shown)]: variants to translate and scale it. The bug everyone hits: the label never drops back down when the field is empty because the input has no placeholder at all, so :placeholder-shown is never true. Set placeholder=" " — a single space — and never omit it. That one space is what makes the whole thing work.

Instead of giving every tab its own bottom border, there is one absolutely-positioned indicator bar that slides horizontally under the active tab. The tabs are hidden radio inputs with <label> triggers; checking a radio drives that bar's transform: translateX() and width through a CSS transition, so the underline appears to travel between tabs. Because it is one element moving rather than a border toggling on and off, you get the smooth Material motion for free. The usual mistake is animating left or margin-left, which is not compositor-friendly and stutters — animate transform instead. If your tabs are not equal width you must set the indicator's width and offset per tab in CSS, since pure CSS cannot measure them. The scrollable variant also needs scroll-snap-align on each tab so the active one snaps into view when the row overflows.

All three overlays — the alert dialog, the full dialog and the bottom sheet — are built on the native <dialog> element, which is what makes them accessible with almost no extra work. Opening with dialog.showModal() gives you a real top layer, a ::backdrop you can style with Tailwind's backdrop: variant, automatic focus trapping and Esc-to-close, and it marks the rest of the page inert. You do not hand-roll a focus loop or a role attribute. Add aria-labelledby pointing at the title so screen readers announce it. The bottom sheet is the same element slid up from the bottom with a transform. The snackbar is not a dialog — it is a transient status message that should be a live region so it is announced without stealing focus. The common trap: calling .show() or setting the open attribute instead of .showModal(), which skips the top layer and the inert behaviour.

Sorting state lives on the header cells as aria-sort, which is both the accessibility signal and the styling hook. Each sortable column header is a <th> with aria-sort set to ascending, descending or none, and the sort arrow is drawn with a Tailwind attribute selector keyed off that value — so the visible indicator can never drift from what a screen reader announces. The sticky header is sticky top-0 on the header row with a background so rows scroll underneath it. Row selection uses a checkbox per row that tints the row through the has-[:checked]: variant, and a header checkbox toggles all. Two things to get right: only ever put aria-sort on the one column currently sorted, because the spec allows a single sorted column at a time; and give the sticky header an opaque background, or the body rows will bleed through it as they scroll behind.

Most are pure CSS. The tabs, chips, stepper and checkout run on hidden radio and checkbox inputs; the expansion panels use <details>; the text-field labels use :placeholder-shown; row selection and chip filtering lean on the has-[] and peer variants. Where you do need script it is small and honest: .showModal() to open the dialogs, a scroll listener to add elevation to the app bar in the shell layout, and the theme switcher writing a class or attribute so the palette swaps. Nothing depends on a framework runtime and there is no hydration step. The one place to resist a pure-CSS solution is the dialog — the checkbox-hack modal cannot trap focus or mark the background inert, so use the real <dialog> even though it costs two lines of script. Copy the markup and the utility classes straight in; there is no build config beyond Tailwind itself.

Material 3 does not think in primary and secondary hex values; it thinks in role pairs — primary / on-primary, primary-container / on-container, and surface with its tint levels. The palette demo lays these out as pairs so you can see which foreground is guaranteed legible on which background. Wire them as CSS custom properties such as --md-primary and expose them to Tailwind through the theme config, then reference bg-primary text-on-primary rather than raw colours. Dark mode and the switcher then become one change: redefine the custom properties under a .dark class or a data-theme attribute and every component re-tints, because they all read the roles, not fixed values. The mistake is hardcoding text-white on a coloured button — it breaks the instant the theme changes. Always pair a background role with its matching on- role.

Reach for the official Material Web components or a kit like MUI when your app is a large, stateful React or Angular product that already lives in that ecosystem — you want their virtualised tables, form-state integration and long-term spec updates, not hand-copied markup. These demos are for the opposite case: a static site, a landing page, a Rails or Django template, or any project where pulling in a component runtime is overkill. They are also a poor fit when you need behaviour the pattern genuinely lacks — the pure-CSS tabs and stepper hold state in radio inputs, so you cannot read or set that state from application code without adding your own script. And do not lean on them to claim full Material Design compliance in an audit; they cover the common components faithfully but are a curated set of 14, not the whole specification. For copy-paste UI in a framework-light stack, though, they drop in with just Tailwind.

They are built on the native <details> and <summary> elements, which gives you keyboard support, correct focus and the open/closed state announced to screen readers with no ARIA of your own. The thing the old checkbox-hack accordion could never do is behave as a true single-open accordion: give every <details> in the group the same name attribute and the browser closes the others automatically when one opens — like radio buttons, but semantic. Style the marker by hiding the default triangle and rotating your own chevron off the [open] state. Animating the height is the classic gotcha: you cannot transition from height: auto, so the demos animate a wrapper's grid-template-rows from 0fr to 1fr, which does interpolate smoothly. And do not nest another interactive control inside the <summary> that also toggles the panel, or the two click targets will fight each other.