Learn to simplify the design side of your web app creation by applying this programmer-friendly style framework.
Overview
Syllabus
Introduction
- Why utility-first frameworks matter
- Using the exercises for this course
- Using GitHub Codespaces with this course
- Working with Tailwind CSS
- Creating a custom build
- Tailwind Play
- Examples with CodePen
- CodeSwing playground
- Preflight
- Utility class structure
- Tailwind pitfalls
- Color classes
- Shortcut classes
- Special classes
- Responsive design
- Custom properties
- Challenge: Create a layout
- Solution: Create a layout
- 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
- Exploring the config
- Configuring themes
- Existing scales
- Plugins
- Typography
- Line clamp
- Next steps
Taught by
Ray Villalobos
