Tailwind Mastery

Get acquainted with Tailwind's utility-first approach by building a custom message component.

Use Tailwind's Flexbox utilities to make an application layout with fixed and flexible panels.

Choose which Flexbox panels should scroll when their contents overflow their container.

Learn best practices for overriding and extending Tailwind's default colors with your brand’s palette.

Override the default typeface used by Tailwind with an imported font.

See how to maintain a utility-first workflow when styling icons by working with inline SVG elements.

Generate a one-off corner transition using the Just-In-Time engine.

Conditionally apply classes to target different application states.

Use groups to style child elements based on an ancestor's pseudostate.

See how a reusable component removes duplicate classes without the need for a CSS architecture.

Customize Tailwind's shadows to recreate Discord's floating header.

Learn how to use spacing and group utilities to style a list of dynamic items.

Map over JSON data to dynamically build up the channel list.

Use nested router segments to build an active channel link.

Style a channel's unread state using a simple pattern to improve readability.

Use React state and Tailwind transitions to animate a collapsed category's icon.

Use the truncate utility to control which panel grows or shrinks based on the available space.

Learn how to work with @tailwindcss/forms to recreate Discord's search box.

Extract two versions of our component from Lesson 1 to render each channel's messages.

Round out the app by replacing the remaining static text and links with dynamic data.

Use Tailwind's mobile-first responsive utilities to customize the interface on small screens.