Ruby on Railsframework~30 mins

CSS bundling options in Ruby on Rails - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

CSS Bundling Options in Rails

📖 Scenario: You are building a simple Rails web app that needs styling. You want to organize your CSS files efficiently using Rails CSS bundling options.

🎯 Goal: Create a basic Rails CSS setup using CSS bundling with Tailwind CSS. You will set up the CSS file, configure bundling, and include the styles in your application layout.

📋 What You'll Learn

Create a CSS file named application.tailwind.css with Tailwind directives

Add gem "cssbundling-rails", group: :development to your Gemfile

Use the cssbundling-rails gem to install Tailwind CSS

Include the bundled CSS in the application layout file app/views/layouts/application.html.erb

💡 Why This Matters

🌍 Real World

Organizing CSS with bundling helps keep styles efficient and maintainable in Rails web apps.

💼 Career

Understanding CSS bundling in Rails is important for frontend styling and performance optimization in professional Rails development.

Progress0 / 4 steps

Create the Tailwind CSS file

Create a CSS file named app/assets/stylesheets/application.tailwind.css with the exact content:
@tailwind base;
@tailwind components;
@tailwind utilities;

Ruby on Rails

# Create the file app/assets/stylesheets/application.tailwind.css
# Add Tailwind CSS directives inside
# Your code here

Need a hint?

These three lines import Tailwind's base styles, components, and utilities.

Add cssbundling-rails gem

Add the line gem "cssbundling-rails", group: :development to the Gemfile file to enable CSS bundling for Tailwind CSS.

Ruby on Rails

# Add gem "cssbundling-rails", group: :development to Gemfile
# Your code here

Need a hint?

This gem provides the css:install:tailwind command for bundling.

Install Tailwind CSS with cssbundling-rails gem

Run the command bin/rails css:install:tailwind to install Tailwind CSS bundling setup using the cssbundling-rails gem.

Ruby on Rails

# Run the install command in terminal
# Your code here

Need a hint?

This command sets up Tailwind CSS bundling files and configuration.

Include bundled CSS in application layout

Add the line = stylesheet_link_tag "application", "data-turbo-track": "reload" inside the <head> tag of app/views/layouts/application.html.erb to load the bundled CSS.

Ruby on Rails


  
  # Your code here

Need a hint?

This tag loads the bundled CSS file into your Rails app layout.