From CSS you know to utility classes

The same three declarations, two places to write them

"CSS flexbox: alignment" covered display: flex, justify-content and align-items as CSS properties in a stylesheet. This app's app/views/enrollment/dashboard/_ongoing_course_card.html.erb gets the same layout without writing any of that as CSS:

<div class="w-16 h-16 rounded-2xl <%= lvl[:bg_badge] %> flex items-center justify-center shrink-0 border <%= lvl[:border_color] %> transform group-hover:scale-110 transition-transform duration-300">

flex is display: flex. items-center is align-items: center. justify-center is justify-content: center. The CSS underneath is the same, and the main and cross axes from the flexbox courses still apply. What changed is where the declaration lives: on the element, in the view, as a class name, instead of in app/assets/tailwind/application.css, the file an earlier course opened.

Utility-first, the name for this

Tailwind calls this utility-first CSS. Instead of naming a custom class like .course-badge and writing display: flex inside it in a separate stylesheet, you use a class that already means display: flex. flex means the same thing everywhere it appears in this app, the way justify-content: center always means the same thing in plain CSS. There's no indirection to trace and no second file to open to learn what a class does: the class name stays close to the property.

Why this app writes styling in the ERB

A traditional stylesheet groups rules by selector, .course-badge { }, and a developer switches between the HTML file and the CSS file to see how they connect. This app's views skip that: class="w-16 h-16 rounded-2xl ... flex items-center justify-center ..." sits on the element it styles, in the same file. Reading _ongoing_course_card.html.erb shows the structure and the styling in one pass.

What this course covers

This course picks up where "Folder structure: app/assets" left off. Its closing lesson named this course as the place for Tailwind's deeper configuration, custom variants, responsive breakpoints and plugin usage. @theme, the entry point file, bin/rails tailwindcss:build and bin/dev's Foreman setup were covered by earlier courses and aren't repeated. Lesson 2 builds flex layouts from this app's views. Lesson 3 moves to CSS Grid, which no earlier course in this catalog has taught. Lesson 4 covers this app's responsive breakpoints. Lesson 5 covers arbitrary values, the escape hatch for a one-off number that no named utility covers. Lesson 6 covers this app's @layer components classes (.btn, .card, .badge-*) and the judgment call of when a repeated utility combination earns its own name. Lesson 7 closes with the whole utility-first workflow.