Tailwind CSS, v2

Steve Kinney
Temporal
4 hours, 27 minutes CC
Tailwind CSS, v2

Course Description

Learn Tailwind CSS's utility-first approach to build out entire web designs without any custom CSS! Compose any design directly in markup and implement advanced responsive layouts with flexbox, grid, and container queries. Build accessible, interactive components and add UI polish with dark mode, animations, & transitions.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: August 4, 2025

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops

Table of Contents

Introduction

Section Duration: 16 minutes
  • Introduction
    Steve introduces the course by explaining Tailwind as a utility-first CSS framework that uses single-purpose classes for styling. He highlights its benefits, such as faster prototyping and fewer cascade issues, while noting concerns like class bloat.
  • How Tailwind CSS Works
    Steve explains that you don't need to know every detail of Tailwind—just the basics. It scans code files for full class names, allowing customization of colors, spacing, and fonts, but warns against complex setups that can break things.

Best Practices & Anti-Patterns

Section Duration: 10 minutes
  • Using CSS Layers
    Steve explains Tailwind CSS layers including, theme for variables, base for HTML element styles, and components for elements like buttons. He covers the @layer and @utility, notes that layer order affects output, but Tailwind handles it internally, making code order flexible and helping with tooling like IntelliSense.
  • Configuration & Variants
    Steve explains how the theme layer lets you use CSS variables to customize colors. He also highlights Tailwind responsive utilities like `md` and `lg`, which reduce the need for media queries and help keep code concise and flexible.
  • Tailwind CSS Anti-Patterns
    Steve highlights common Tailwind patterns and anti-patterns, stressing the use of utility classes over custom ones for maintainability. He recommends setting theme variables and avoiding arbitrary values to keep code cohesive and reduce the need for extra CSS.

Element Styling, Borders, & Spacing

Section Duration: 44 minutes
  • Course Setup
    Steve demonstrates setting up the course website called Tailwind Skatepark and provides various tools and resources for Tailwind CSS development, including a Tailwind CSS IntelliSense plugin for VS Code. He emphasizes the importance of using these tools for efficient development.
  • Styling a Button
    Steve demonstrates how the IntelliSense plugin reveals CSS for Tailwind classes and walks through styling a button with padding, rounding, and shadows.
  • Styling Buttons Exercise
    Steve instructs students to create and style either the secondary button or the danger button. He then demonstrates how to style the secondary button, covering background color, padding, borders, shadows, and hover effects. Steve also discusses how borders influence button size and introduces outlines to enhance interactive elements.
  • Borders, Outlines, & Rings
    Steve explains the differences between using borders, outlines, and rings in web design. He highlights that outlines are preferred to prevent layout shifts caused by borders, and mentions that rings, while still available, are more of a hack using box shadows. Steve emphasizes that unless specific design needs require it, outlines are generally the best choice for interactive elements.
  • Card Layout Exercise
    Steve instructs students to create a card layout using borders, background colors, and typography. He also walks through a possible solution styling with CSS properties like padding, rounded corners, and font styles.
  • Spacing Between Elements
    Steve discusses layout techniques like margin-based layouts, Flexbox, and Grid for arranging components. He also shows how to use Tailwind utilities like space Y, space X, and divide Y for spacing in a card list.

Form Styling

Section Duration: 31 minutes

Utility-First Styling

Section Duration: 1 hour, 7 minutes
  • Parent State Styling
    Steve demonstrates utilizing Tailwind's "group" and "peer" classes to style elements based on parent or sibling interactions, enabling interactive effects with just CSS.
  • Has Utility Class
    Steve explains how the CSS "has" selector lets a parent style itself based on its children, enabling dynamic interactions without JavaScript. Used with selectors like "group" and "peer," it allows for powerful, minimal-code styling.
  • Required Field Indicator
    Steve demonstrates how to use the combination of "group" and "has" to style elements based on their attributes without using JavaScript. By utilizing pseudo-elements and CSS selectors, he shows how to add a visual indicator, like a red dot, to a label when an input field is required.
  • Has Utility Exercises
    Steve instructs students to refactor a checkbox container to change its background when checked, then walks through the solution. He also suggests challenges like revealing more questions based on selection and emphasizes breaking UI into smaller, testable parts.
  • File Tree Challenge
    Steve builds a file tree with checkboxes to show selected files in folders. He styles child checkboxes based on parent selection using classes like "peer" and "pointer-events-none," and notes accessibility challenges and when JavaScript might be needed.
  • Input with Button Component
    Steve demonstrates how to style form elements for accessibility using classes like sr-only for screen reader visibility, outline for focus states, and has for input validation styling.

Flexbox & Grid Layouts

Section Duration: 1 hour, 4 minutes
  • Flexbox
    Steve explains how Flexbox works with Tailwind CSS to simplify layouts. He demonstrates properties like direction, alignment, and responsive design using utility classes, highlighting Tailwind’s efficiency in frameworks like React or Angular.
  • Flexbox Nav Layout Exercise
    Steve instructs students to transform a basic navigation bar using flexbox properties. He then demonstrates a solution using flex, justify, align, and other utility classes for the navigation layout.
  • Grid
    Steve compares Flexbox and CSS Grid, focusing on Grid’s two-dimensional layouts. He shows how to set up grids, adjust rows and columns, and build responsive designs with Tailwind. He also covers spanning, reordering, and more complex layouts.
  • Grid Exercise
    Steve instructs students to create a traditional blog layout with a header, sidebar, and footer, adapting it to a responsive one-column layout for mobile. Steve then demonstrates adjusting column sizes, heights, and grid settings to create a dynamic layout transition from mobile to desktop views.
  • Container Queries
    Steve introduces container queries in responsive design, showing how they let elements adapt to their container’s size instead of the viewport. This offers flexible layouts without needing multiple component versions or extra class adjustments.

Tailwind Extras

Section Duration: 23 minutes
  • Dark Mode
    Steve explains two ways to implement dark mode in Tailwind CSS: using a media query based on the user's color scheme or by adding a class like .dark to elements. He demonstrates how to adjust styles for dark mode by adding dark variants to Tailwind classes.
  • Tailwind Tools
    Steve introduces tools like tailwind-merge, Class Variance Authority, and Tailwind UI to improve design systems, boost efficiency, and maintain consistency in development.
  • Transitions & Animations
    Steve discusses adding transitions and animations by mapping utility classes to CSS properties like transition colors. Tailwind also supports advanced features like custom durations and starting styles.

Wrapping Up

Section Duration: 9 minutes
  • Wrapping Up
    Steve wraps up the course by discussing a student's question regarding the upgrading from Tailwind 4 to a hypothetical Tailwind 5. He also shares resources for developers to choose color schemes and discusses setting up Tailwind in a monorepo.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now