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

Custom Class

Back in Lesson 4, we created the btn-shading-bn class:

📃 src/assets/main.css

/* button shading (barely noticeable) */
.btn-shading-bn {
  box-shadow: inset 0 -0.6em 1em -0.35em rgba(0, 0, 0, 0.17),
    inset 0 0.