Tailwind CSS: layouts & fluxo de trabalho
O curso trata das classes utilitárias do Tailwind CSS nas views ERB de um app Rails. Começa ligando propriedades CSS conhecidas, como display: flex, a nomes de classe escritos no próprio elemento. Depois monta layouts flex, passa para o CSS Grid em arranjos de duas dimensões e explica os prefixos de breakpoint mobile-first. As aulas seguintes tratam de valores arbitrários entre colchetes, classes de componente com nome dentro de @layer components e um fluxo de trabalho para decidir quando um valor ou padrão repetido merece nome próprio.
O que você vai aprender
- ✓Como propriedades CSS viram classes utilitárias do Tailwind
- ✓Layouts flex com flex-col, flex-1, shrink-0 e min-w-0
- ✓Layouts em duas dimensões com grid-cols-N e gap
- ✓Design responsivo mobile-first com prefixos de breakpoint
- ✓Valores arbitrários e quando usar tokens do @theme
- ✓Classes de componente em @layer components e a ordem das camadas de cascata
Do CSS que você já sabe pras classes utilitárias
"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:
Ler a aula completa grátis →Currículo
7 aulasDo CSS que você já sabe pras classes utilitárias
Mostra como classes utilitárias como flex e items-center correspondem a propriedades CSS escritas no próprio elemento.
Layouts flex nas views deste app
Lê os containers flex aninhados de um card, com flex-col, flex-1, shrink-0 e min-w-0 para o truncate.
Grid: layouts bidimensionais
Apresenta o CSS Grid com grid-cols-N e gap, e mostra grid e flex aninhados num painel.
Design responsivo com prefixos de breakpoint
Explica os breakpoints padrão do Tailwind e a cascata mobile-first de utilitários com prefixo em colunas e padding.
Valores arbitrários, e quando usar um token
Trata de valores arbitrários entre colchetes, como text-[11px], e de quando um token do @theme serve melhor.
Extraindo componentes com @layer components
Trata de classes com nome em @layer components, da ordem das camadas, do color-mix() e de nomes de classe completos.
Juntando tudo: um fluxo de trabalho utility-first
Junta as aulas num fluxo: utilitários na view, prefixos responsivos desde o início e nomes extraídos após repetição.