Tailwind CSS Exercises

Apply your knowledge with interactive coding challenges. Complete these 30 Tailwind CSS exercises to master the language.

30

Total Challenges

0

Completed

30

Remaining

0% Complete

tailwindEasy

TAILWIND Exercise: Responsive Design

Practice Responsive Design in tailwind with this interactive exercise.

Responsive Design 10 mins
tailwindEasy

Utility Classes

Build UIs with utility classes using Tailwind CSS.

Fundamentals 10 mins
tailwindEasy

Colours

Build UIs with colours using Tailwind CSS.

Styling 10 mins
tailwindEasy

TAILWIND Exercise: Hover, Focus, & Other States

Practice Hover, Focus, & Other States in tailwind with this interactive exercise.

Hover, Focus, & Other States 10 mins
tailwindEasy

TAILWIND Exercise: Dark Mode

Practice Dark Mode in tailwind with this interactive exercise.

Dark Mode 10 mins
tailwindEasy

Typography

Build UIs with typography using Tailwind CSS.

Styling 10 mins
tailwindEasy

Spacing

Build UIs with spacing using Tailwind CSS.

Layout 10 mins
tailwindEasy

TAILWIND Exercise: Reusing Styles

Practice Reusing Styles in tailwind with this interactive exercise.

Reusing Styles 10 mins
tailwindEasy

Sizing

Build UIs with sizing using Tailwind CSS.

Layout 10 mins
tailwindEasy

TAILWIND Exercise: Adding Custom Styles

Practice Adding Custom Styles in tailwind with this interactive exercise.

Adding Custom Styles 10 mins
tailwindEasy

Flexbox

Build UIs with flexbox using Tailwind CSS.

Layout 10 mins
tailwindEasy

TAILWIND Exercise: Functions & Directives

Practice Functions & Directives in tailwind with this interactive exercise.

Functions & Directives 10 mins
tailwindEasy

Grid

Build UIs with grid using Tailwind CSS.

Layout 10 mins
tailwindEasy

TAILWIND Exercise: Flexbox

Practice Flexbox in tailwind with this interactive exercise.

Flexbox 10 mins
tailwindEasy

Responsive Design

Build UIs with responsive design using Tailwind CSS.

Responsive 10 mins
tailwindMedium

TAILWIND Exercise: Grid

Practice Grid in tailwind with this interactive exercise.

Grid 10 mins
tailwindEasy

Cards

Build UIs with cards using Tailwind CSS.

Components 10 mins
tailwindMedium

TAILWIND Exercise: Spacing

Practice Spacing in tailwind with this interactive exercise.

Spacing 10 mins
tailwindEasy

Responsive Navbar

Build UIs with responsive navbar using Tailwind CSS.

Components 10 mins
tailwindMedium

TAILWIND Exercise: Utility-First

Practice Utility-First in tailwind with this interactive exercise.

Utility-First 10 mins
tailwindMedium

TAILWIND Exercise: Responsive Design

Practice Responsive Design in tailwind with this interactive exercise.

Responsive Design 10 mins
tailwindMedium

TAILWIND Exercise: Hover, Focus, & Other States

Practice Hover, Focus, & Other States in tailwind with this interactive exercise.

Hover, Focus, & Other States 10 mins
tailwindMedium

TAILWIND Exercise: Dark Mode

Practice Dark Mode in tailwind with this interactive exercise.

Dark Mode 10 mins
tailwindMedium

TAILWIND Exercise: Reusing Styles

Practice Reusing Styles in tailwind with this interactive exercise.

Reusing Styles 10 mins
tailwindHard

TAILWIND Exercise: Adding Custom Styles

Practice Adding Custom Styles in tailwind with this interactive exercise.

Adding Custom Styles 10 mins
tailwindHard

TAILWIND Exercise: Functions & Directives

Practice Functions & Directives in tailwind with this interactive exercise.

Functions & Directives 10 mins
tailwindHard

TAILWIND Exercise: Flexbox

Practice Flexbox in tailwind with this interactive exercise.

Flexbox 10 mins
tailwindHard

TAILWIND Exercise: Grid

Practice Grid in tailwind with this interactive exercise.

Grid 10 mins
tailwindHard

TAILWIND Exercise: Spacing

Practice Spacing in tailwind with this interactive exercise.

Spacing 10 mins
tailwindHard

TAILWIND Exercise: Utility-First

Practice Utility-First in tailwind with this interactive exercise.

Utility-First 10 mins