O que app/assets/ guarda neste projeto

Duas linhas em toda página que esta app renderiza

O layout deste projeto, app/views/layouts/application.html.erb, tem estas três linhas no <head>:

<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>   <%# linha 45 %>
<%= stylesheet_link_tag "lexxy", "data-turbo-track": "reload" %>      <%# linha 46 %>
<%= javascript_importmap_tags %>                                     <%# linha 47 %>

A do meio carrega o lexxy, uma folha de estilo que vem dentro de uma gem, então não mora em app/assets/. As páginas de aula com desafio de código também acrescentam o xterm.css de um CDN, fora do pipeline de assets desta app. Uma app real costuma carregar CSS de mais de um lugar.

Este curso trata da primeira e da última linha. Uma traz CSS, a outra JavaScript. Parecem irmãs, mas apontam para duas pastas diferentes, cuidadas por dois mecanismos diferentes. Confundir as duas pode custar uma tarde de debug a quem está começando.

De um relance a um olhar de perto

O tour por app/ do curso Rails CLI: rails new citou app/assets/ de passagem: "stylesheets and images". Está certo, mas é breve. Este curso abre a pasta usando os arquivos deste projeto. Uma app Rails padrão guarda o CSS em app/assets/stylesheets/application.css, e este projeto não tem esse arquivo. A aula 2 mostra o que ficou no lugar dele.

O que há em app/assets/

app/assets/
├── builds/
│   ├── .keep
│   ├── tailwind/
│   └── tailwind.css       (gerado, veja a aula 3)
├── images/
│   └── .keep
└── tailwind/
    └── application.css

Três pastas, cada uma com um trabalho. tailwind/ guarda o arquivo fonte que o desenvolvedor edita. builds/ guarda o que é gerado a partir dele para o navegador; o tailwind.css só aparece depois do primeiro build. images/ guarda arquivos de imagem como estão, sem etapa de geração. As aulas 2 a 4 tratam de uma por vez.

O que este curso cobre

1. app/assets/tailwind/application.css, o arquivo de onde partem os estilos deste projeto.
2. Como esse arquivo vira app/assets/builds/tailwind.css, o arquivo que o navegador baixa.
3. app/assets/images/, e como o Propshaft evita que o navegador mostre um arquivo antigo do cache.
4. Onde app/assets/ termina e app/javascript/ começa, e por quê.
5. Rodar o pipeline neste projeto e conferir o que ele faz.
6. Um fechamento, e onde o próximo curso, Bundler e Gemfile, continua.

No fim, dá para seguir o stylesheet_link_tag "tailwind", arquivo por arquivo, até o que ele carrega.