Documentation Components Screencasts Resources Community

Getting Up and Running

Setting Up Tailwind and PostCSS
The Utility-First Workflow
Responsive Design
Hover, Focus, and Active Styles
Composing Utilities with @apply
Extracting Reusable Components
Customizing Your Design System
Optimizing for Production

Designing an image card

Structuring a Basic Card
Making Text Content Feel Designed
Working with SVG Icons
Designing a Badge
Cropping and Positioning Images
Locking Images to a Fixed Aspect Ratio
Creating Depth with Shadows and Layers

Building a responsive navbar

Building a Navbar Layout with Flexbox
Toggling the Navbar Links on Mobile
Making the Navbar Responsive

Building a dropdown menu

Styling the Basic Dropdown Elements
Positioning the Dropdown Area
Making the Dropdown Interactive
Adapting the Dropdown for Mobile

Styling form elements

Styling basic text inputs
Using positioning to build a search input group
Using focus-within to change the search icon color
Styling custom select menus
Styling custom checkboxes and radio buttons
Using the custom forms plugin

Working with CMS content

Targeting elements when you can't add classes
Styling headings
Styling paragraph text
Styling lists

Layout Patterns

Building a responsive sidebar layout with flexbox
Building responsive grids
Building a sticky footer
Building a side-scrolling card layout

Extending Tailwind

Using custom fonts
Using a custom color palette
Adding custom utilities
Working with third-party plugins
Writing your own simple plugin

We're still working on this one!

This lesson isn't finished yet but we should have it published within the next few weeks.

Get notified when new lessons are published.

Beautiful UI components by the creators of Tailwind CSS.

Learn UI design, from the creators of Tailwind CSS.

Tailwind UI is now in early access! Now in early access! Beautiful UI components by the creators of Tailwind CSS. Beautiful UI components, crafted by the creators of Tailwind CSS.