Folder structure: app/assets
This course looks at the app/assets/ folder in a Rails project that uses Propshaft, Tailwind and import maps. It starts from the layout lines that load CSS and JavaScript and follows each one to its files. It covers the Tailwind source file and its @theme design tokens, the build that writes app/assets/builds/tailwind.css, and how Propshaft fingerprints images with a content hash. It also draws the boundary between app/assets/ and app/javascript/, then runs the build and inspects Propshaft's load paths.
What you'll learn
- ✓What each folder under app/assets/ holds and why
- ✓How @theme tokens in application.css become Tailwind utilities
- ✓How tailwindcss:build and tailwindcss:watch generate builds/tailwind.css
- ✓How Propshaft fingerprints files so browsers avoid stale cached copies
- ✓Where app/assets/ ends and app/javascript/ begins, and what import maps do
- ✓How to inspect the build output and Propshaft's load paths
What app/assets/ holds in this project
This project's layout, app/views/layouts/application.html.erb, has these three lines in its <head>:
Read the full lesson free →Curriculum
7 lessonsWhat app/assets/ holds in this project
Tours the three folders under app/assets/ and the layout lines that load CSS and JavaScript.
app/assets/tailwind/application.css: the CSS entry point
Reads the Tailwind entry point, where @import brings in utilities and @theme defines the app's design tokens.
From source to browser: the Tailwind build
Shows how tailwindcss:build and the Procfile.dev watcher generate builds/tailwind.css, and why Git ignores that file.
app/assets/images/ and Propshaft's fingerprinting
Explains how Propshaft adds a SHA1 content digest to filenames so browsers never show stale cached images.
The boundary: app/assets vs app/javascript
Draws the line between app/assets/ for CSS and images and app/javascript/ for Stimulus controllers and import maps.
Running the asset pipeline
Runs the Tailwind build, inspects Propshaft's load paths and shows which gem handles each part of the pipeline.
Putting it together: app/assets, end to end
Traces the two layout lines back to their source files, gems and folders from start to finish.