Tailwind CSS practice

Filter by difficulty, use hints, reveal solutions and save attempts locally.

1. Practice Tailwind Introduction by building one step of a modern Tailwind UI gallery and checking the result.

code-writing

beginnerTailwind Introduction

1. Start from the Tailwind Introduction lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

2. Practice Tailwind Setup by building one step of a modern Tailwind UI gallery and checking the result.

code-fix

beginnerTailwind Setup

1. Start from the Tailwind Setup lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

3. Practice Utility First Concept by building one step of a modern Tailwind UI gallery and checking the result.

output

beginnerUtility First Concept

1. Start from the Utility First Concept lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

4. Practice Typography Utilities by building one step of a modern Tailwind UI gallery and checking the result.

fill-blank

beginnerTypography Utilities

1. Start from the Typography Utilities lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

5. Practice Spacing Padding Margin by building one step of a modern Tailwind UI gallery and checking the result.

true-false

beginnerSpacing Padding Margin

1. Start from the Spacing Padding Margin lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

6. Practice Colors and Borders by building one step of a modern Tailwind UI gallery and checking the result.

mini-project

beginnerColors and Borders

1. Start from the Colors and Borders lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

7. Practice Sizing Width Height by building one step of a modern Tailwind UI gallery and checking the result.

mcq

beginnerSizing Width Height

1. Start from the Sizing Width Height lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

8. Practice Flexbox Utilities by building one step of a modern Tailwind UI gallery and checking the result.

code-writing

beginnerFlexbox Utilities

1. Start from the Flexbox Utilities lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

9. Practice Grid Utilities by building one step of a modern Tailwind UI gallery and checking the result.

code-fix

beginnerGrid Utilities

1. Start from the Grid Utilities lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

10. Practice Layout and Position by building one step of a modern Tailwind UI gallery and checking the result.

output

beginnerLayout and Position

1. Start from the Layout and Position lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

11. Practice Responsive Design Utilities by building one step of a modern Tailwind UI gallery and checking the result.

fill-blank

intermediateResponsive Design Utilities

1. Start from the Responsive Design Utilities lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

12. Practice Hover Active Focus States by building one step of a modern Tailwind UI gallery and checking the result.

true-false

intermediateHover Active Focus States

1. Start from the Hover Active Focus States lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

13. Practice Dark Mode by building one step of a modern Tailwind UI gallery and checking the result.

mini-project

intermediateDark Mode

1. Start from the Dark Mode lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

14. Practice Custom Tailwind Config by building one step of a modern Tailwind UI gallery and checking the result.

mcq

intermediateCustom Tailwind Config

1. Start from the Custom Tailwind Config lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

15. Practice Custom Plugins by building one step of a modern Tailwind UI gallery and checking the result.

code-writing

intermediateCustom Plugins

1. Start from the Custom Plugins lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

16. Practice Tailwind with React by building one step of a modern Tailwind UI gallery and checking the result.

code-fix

intermediateTailwind with React

1. Start from the Tailwind with React lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

17. Practice Transitions and Animations by building one step of a modern Tailwind UI gallery and checking the result.

output

intermediateTransitions and Animations

1. Start from the Transitions and Animations lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

18. Practice Filters and Effects by building one step of a modern Tailwind UI gallery and checking the result.

fill-blank

intermediateFilters and Effects

1. Start from the Filters and Effects lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

19. Practice SVG Styling by building one step of a modern Tailwind UI gallery and checking the result.

true-false

intermediateSVG Styling

1. Start from the SVG Styling lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

20. Practice Tailwind Components by building one step of a modern Tailwind UI gallery and checking the result.

mini-project

intermediateTailwind Components

1. Start from the Tailwind Components lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

21. Practice Card Component Grid by building one step of a modern Tailwind UI gallery and checking the result.

mcq

advancedCard Component Grid

1. Start from the Card Component Grid lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

22. Practice Navigation Bar Responsive by building one step of a modern Tailwind UI gallery and checking the result.

code-writing

advancedNavigation Bar Responsive

1. Start from the Navigation Bar Responsive lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

23. Practice Footer Section by building one step of a modern Tailwind UI gallery and checking the result.

code-fix

advancedFooter Section

1. Start from the Footer Section lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

24. Practice Pricing Section Layout by building one step of a modern Tailwind UI gallery and checking the result.

output

advancedPricing Section Layout

1. Start from the Pricing Section Layout lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

25. Practice Best Practices by building one step of a modern Tailwind UI gallery and checking the result.

fill-blank

advancedBest Practices

1. Start from the Best Practices lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

26. Practice Arbitrary Values by building one step of a modern Tailwind UI gallery and checking the result.

true-false

advancedArbitrary Values

1. Start from the Arbitrary Values lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

27. Practice Optimizing Production Size by building one step of a modern Tailwind UI gallery and checking the result.

mini-project

advancedOptimizing Production Size

1. Start from the Optimizing Production Size lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

28. Practice Tailwind CLI by building one step of a modern Tailwind UI gallery and checking the result.

mcq

advancedTailwind CLI

1. Start from the Tailwind CLI lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

29. Practice Utility Class Merging by building one step of a modern Tailwind UI gallery and checking the result.

code-writing

advancedUtility Class Merging

1. Start from the Utility Class Merging lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.

30. Practice Tailwind Review by building one step of a modern Tailwind UI gallery and checking the result.

code-fix

advancedTailwind Review

1. Start from the Tailwind Review lesson example.

2. Use colors, dimensions and grid positions instead of placeholder text.

3. Run the example and compare output before polishing.