Tailwind CSS 3 Essential Training

Learn to simplify the design side of your web app creation by applying this programmer-friendly style framework.

Introduction

• Why utility-first frameworks matter
• Using the exercises for this course
• Using GitHub Codespaces with this course

2. Getting Started

• Working with Tailwind CSS
• Creating a custom build
• Tailwind Play
• Examples with CodePen
• CodeSwing playground

3. Utility-First Features

• Preflight
• Utility class structure
• Tailwind pitfalls
• Color classes
• Shortcut classes
• Special classes
• Responsive design
• Custom properties
• Challenge: Create a layout
• Solution: Create a layout

4. Power Techniques

• State modifiers
• Position modifiers
• Form modifiers
• Child and sibling elements
• Attribute modifiers
• Pseudo-elements
• Media modifiers
• Dark mode
• Challenge: Dark mode and grouping
• Solution: Dark mode and grouping

5. Customizing Tailwind

• Exploring the config
• Configuring themes
• Existing scales

6. Plugins

• Plugins
• Typography
• Line clamp

Conclusion

• Next steps