Steve Kinney

Writing Courses

Courses

→

Tailwind

Tailwind Plugins

@tailwindcss/forms
@tailwindcss/typography
shadcn/ui

Last modified on June 12, 2025.

See something that looks a little off? Feel free to open a pull request here.

Tailwind Play
Flexbox Playground
[Grid Playground](- Flexbox Playground)

High-Level

Utility-First CSS
Build Process & Tooling Integration
How Tailwind Detects Classes
Best Practices
Anti-Patterns
What Is Oxide?
Differences In Tailwind 4

The Basics

Building a Button
Spacing and Dividing Utilities
Borders, Outlines, and Rings
Building a Card Component
Building a Form Input
Focus States
Further Form Improvements
Even More Form State Styling Improvements

Interactive States and Variants

has-*
has-* Challenges
Building an Interactive Checklist
not-*
Building a Card List
Group and Peer Modifiers
Before & After Pseudo-Selectors
Building a Details Disclosure Card
Building a Compound Input
Data Attribute Variants
User Preference Variants
Building an Image Card with an Overlay

Color Theory

currentColor
OKLCH Color Palette
CSS Variable Integration
Color Schemes
Gradients

Flexbox

Direction and Wrapping
Alignment
Growing and Shrinking
Initial Size
Aligning Individual Items
Multi-Directional Layouts
Order Manipulation

Grid Layouts

CSS Grid: The Basics
Defining Grid Columns and Rows
Placing Grid Items (Spanning and Positioning)
Auto-Placement and Implicit Tracks
Alignment and Justification
Subgrids
Creating an Invoice Table
Dynamic Columns
Arbitrary Column Counts
Complex Grid Templates
Building a Dashboard
Auto-Fit and Auto-Fill Patterns
Multi-Column Layouts
Building a Blog Layout

Responsive Design

Breakpoint Utilities
Container Queries
Building a Navigation Menu
Building a Statistics Card

Accessibility

ARIA Integration
Screen Reader Support
inert

Animations and Transitions

Transitions
Transforms
Built-In Animations
@starting-style
Pulse and Loading Indicator Patterns

Theming and Customization

Theme Customization
Dark Mode
Tailwind Plugins

Typography

Text Styles and Font Families
Line Spacing and Letter Spacing
Caret and Accent Color
Truncation and Wrapping

Examples

Popover
Modal

Usage in Components

Merging and Deduplicating Class Names

Random Notes

State Variants
@property
color-mix()
Button Exemplars