Utility-First CSS with Tailwind

Lessons

1. What is Utility-First CSS?

3:56

2. Setting up the project

3:14

3. Basic Utility Classes

5:45

4. Responsive Design

4:58

5. Dynamic Style

6:29

6. Customizing Tailwind

3:39

7. Custom Class

4:53

8. Code-Reuse Patterns

4:49

Dynamic Style

Welcome back. Let’s continue factoring the ProductDisplay component.

The problems we’re dealing with in this lesson are all related to dynamic styling, specifically for these two elements:

📃 src/components/ProductDisplay.vue

<div 
  v-f