Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Tailwind CSS 4 Essential Training

via LinkedIn Learning

Write review

Details

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Effort

3 hours
Sessions

Self-Paced
Level

Beginner

Found in

Develop foundational skills in Tailwind CSS 4 to create beautiful, responsive webpages quickly and efficiently. Learn how to use Tailwind CSS to create responsive and functional layouts directly within your HTML using practical examples.

Syllabus

Introduction
- Meet Tailwind CSS
- What you should know
- Using Codespaces for this course
- Understanding the utility-first approach
Typography and Colors
- Understanding preflight
- Applying text and font styles
- Using colors
- Applying background colors and gradients
- Adding borders and shadows
- Challenge: Style a testimonial card
- Solution: Style a testimonial card
Layout Fundamentals
- Setting width and height
- Adding margins and padding
- Creating flexbox layouts
- Sizing flex items and nesting
- Creating grid layouts
- Sizing and reordering grid items
- Using display, position, and z-index utilities
- Challenge: Style an event page section
- Solution: Style an event page section
Responsive Web Design
- Understanding the mobile-first approach
- Using responsive modifiers
- Building common responsive layouts
- Challenge: Info card with image
- Solution: Info card with image
Interactivity and Variants
- Style elements on hover and focus
- Using pseudo-class modifiers
- Styling pseudo-elements
- Adding dark mode
- Transforms, transitions, and animations
- Challenge: Make an interactive button
- Solution: Make an interactive button
Custom Styles in Tailwind
- Changing the theme
- Using arbitrary values
- Creating custom utilities
- Extracting common styles
Conclusion
- Setting up your environment
- What next?