Tailwind CSS: layouts & workflow
This course covers Tailwind CSS utility classes as they are used in the ERB views of a Rails app. It starts by mapping familiar CSS properties, such as display: flex, to class names written on the element itself. It then builds flex layouts, moves to CSS Grid for two-dimensional arrangements, and explains mobile-first breakpoint prefixes. Later lessons cover arbitrary values in square brackets, named component classes inside @layer components, and a workflow for deciding when a repeated value or pattern should get its own name.
What you'll learn
- ✓How CSS properties map to Tailwind utility classes
- ✓Flex layouts with flex-col, flex-1, shrink-0 and min-w-0
- ✓Two-dimensional layouts with grid-cols-N and gap
- ✓Mobile-first responsive design with breakpoint prefixes
- ✓Arbitrary values compared with @theme tokens
- ✓Component classes in @layer components and cascade layer order
From CSS you know to utility classes
"CSS flexbox: alignment" covered display: flex, justify-content and align-items as CSS properties in a stylesheet. This app's app/views/enrollment/dashboard/_ongoing_course_card.html.erb gets the same layout without writing any of that as CSS:
Read the full lesson free →Curriculum
7 lessonsFrom CSS you know to utility classes
Shows how utility classes like flex and items-center map to CSS properties written directly on the element.
Flex layouts in this app's views
Reads a card view's nested flex containers, covering flex-col, flex-1, shrink-0 and min-w-0 for truncation.
Grid: two-dimensional layouts
Introduces CSS Grid with grid-cols-N and gap, and shows grid and flex nesting in a dashboard.
Responsive design with breakpoint prefixes
Explains Tailwind's default breakpoints and the mobile-first cascade of prefixed utilities for columns and padding.
Arbitrary values, and when to reach for a token
Covers square-bracket arbitrary values like text-[11px] and when a reusable @theme token fits better.
Extracting components with @layer components
Covers named classes in @layer components, cascade layer order, color-mix(), and why class names must be complete strings.
Putting it together: a utility-first workflow
Combines the lessons into one workflow: utilities in the view, responsive prefixes early, and names extracted after repetition.