What app/assets/ holds in this project

Two lines in every page this app renders

This project's layout, app/views/layouts/application.html.erb, has these three lines in its <head>:

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

The middle one loads lexxy, a stylesheet shipped inside a gem, so it doesn't live under app/assets/. Lesson pages with a code challenge also add xterm.css from a CDN, outside this app's asset pipeline. A real app usually loads CSS from more than one place.

This course is about the first and last lines. One pulls in CSS, the other JavaScript. They look like siblings, but they point at two different folders, handled by two different mechanisms. Mixing them up can cost a beginner an afternoon of debugging.

From a glance to a closer look

The Rails CLI: rails new course's tour of app/ named app/assets/ in passing: "stylesheets and images." That's accurate but brief. This course opens the folder using this project's files. A default Rails app keeps its CSS in app/assets/stylesheets/application.css, and this project has no such file. Lesson 2 shows what replaced it.

What's inside app/assets/

app/assets/
├── builds/
│   ├── .keep
│   ├── tailwind/
│   └── tailwind.css       (generated, see lesson 3)
├── images/
│   └── .keep
└── tailwind/
    └── application.css

Three folders, each with one job. tailwind/ holds the source file a developer edits. builds/ holds what gets generated from it for the browser; tailwind.css only appears after the first build. images/ holds image files as they are, with no generation step. Lessons 2 to 4 take them one at a time.

What this course covers

1. app/assets/tailwind/application.css, the file this project's styles start from.
2. How that file becomes app/assets/builds/tailwind.css, the file a browser downloads.
3. app/assets/images/, and how Propshaft keeps a browser from showing a stale cached file.
4. Where app/assets/ ends and app/javascript/ begins, and why.
5. Running the pipeline in this project and checking what it does.
6. A wrap-up, and where the next course, Bundler & Gemfile, picks up.

By the end, you can trace stylesheet_link_tag "tailwind" file by file to what it loads.