Do CSS que você já sabe pras classes utilitárias

As mesmas três declarações, dois lugares para escrevê-las

"CSS flexbox: alinhamento" tratou de display: flex, justify-content e align-items como propriedades CSS numa folha de estilo. O app/views/enrollment/dashboard/_ongoing_course_card.html.erb deste app chega ao mesmo layout sem escrever nada disso como 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 é display: flex. items-center é align-items: center. justify-center é justify-content: center. O CSS por baixo é o mesmo, e os eixos principal e cruzado dos cursos de flexbox continuam valendo. O que mudou foi onde a declaração mora: no elemento, na view, como nome de classe, em vez de no app/assets/tailwind/application.css, o arquivo que um curso anterior abriu.

Utility-first, o nome disso

O Tailwind chama isso de CSS utility-first. Em vez de criar uma classe própria como .course-badge e escrever display: flex dentro dela numa folha de estilo separada, você usa uma classe que já significa display: flex. flex quer dizer a mesma coisa em todo lugar em que aparece neste app, do jeito que justify-content: center sempre quer dizer a mesma coisa no CSS comum. Não há indireção para seguir nem segundo arquivo para abrir para saber o que uma classe faz: o nome da classe fica perto da propriedade.

Por que este app escreve o estilo no ERB

Uma folha de estilo tradicional agrupa regras por seletor, .course-badge { }, e o desenvolvedor alterna entre o arquivo HTML e o arquivo CSS para ver como eles se ligam. As views deste app pulam isso: class="w-16 h-16 rounded-2xl ... flex items-center justify-center ..." fica no elemento que estiliza, no mesmo arquivo. Ler o _ongoing_course_card.html.erb mostra a estrutura e o estilo de uma vez.

O que este curso cobre

Este curso continua de onde "Estrutura: app/assets" parou. A aula de fechamento daquele curso apontou este como o lugar para a configuração mais profunda do Tailwind, variantes próprias, breakpoints responsivos e uso de plugins. O @theme, o arquivo de entrada, o bin/rails tailwindcss:build e o Foreman do bin/dev foram vistos em cursos anteriores e não se repetem aqui. A aula 2 monta layouts flex a partir das views deste app. A aula 3 passa para o CSS Grid, que nenhum curso anterior deste catálogo ensinou. A aula 4 trata dos breakpoints responsivos deste app. A aula 5 trata de valores arbitrários, a saída para um número único que nenhum utilitário com nome cobre. A aula 6 trata das classes de @layer components deste app (.btn, .card, .badge-*) e da decisão de quando uma combinação de utilitários repetida merece um nome próprio. A aula 7 fecha com o fluxo de trabalho utility-first inteiro.