Development

Tailwind CSS Tutorial

Intermediate
2h

By: Shaun Pelling

Tailwind CSS Tutorial

Overview

This course dives into Tailwind CSS, a utility-first CSS framework for rapidly building custom user interfaces. It emphasizes how Tailwind CSS differs from traditional CSS frameworks by providing low-level utility classes that can be composed to build any design, directly in the markup. The course covers the core concepts of Tailwind CSS, including its responsive design features, state variants, and how to apply a mobile-first strategy using its utility classes. Participants learn to harness Tailwind's configuration to extend its functionality, customize its default theme to suit their design needs, and how to work with plugins to add new utilities. The course also explores the process of purging unused styles to optimize the final build size for production. By the end of the course, learners understand how to efficiently craft responsive and maintainable designs with Tailwind CSS, enabling them to rapidly prototype and iterate on their web projects.

Modules

1. Using Tailwind CSS

1.1 Introduction14 min
1.2 HTML Template10 min
1.3 Fonts & Colours9 min
1.4 Margin, Padding & Borders7 min
1.5 Tailwind Config11 min
1.6 Custom Fonts4 min
1.7 Using Flexbox7 min
1.8 Responsive Classes6 min
1.9 Cards7 min
1.10 Badges4 min
1.11 Apply Directive4 min
1.12 CSS Grid7 min
1.13 Buttons5 min
1.14 Icons5 min
1.15 Hover Effects4 min
1.16 Responsive Nav Part 15 min
1.17 Responsive Nav Part 27 min
1.18 Transitions4 min
1.19 Wrap Up2 min

Ready to Elevate Your Team's Learning?

Talk with our sales team to see how StormWind can transform the way your organization trains and grows.

CONTACT SALES