CSS bundling options in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the CSS bundling gem in your Gemfile.

Ruby on Rails

gem '[1]'

Drag options to blanks, or click blank then click option'

Acssbundling-rails

Bwebpacker

Csass-rails

Dturbo-rails

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing unrelated gems like webpacker or turbo-rails.

The cssbundling-rails gem is used to enable CSS bundling in Rails.

2fill in blank

medium

Complete the command to install CSS bundling with Tailwind CSS.

Ruby on Rails

bin/rails css:install:[1]

Drag options to blanks, or click blank then click option'

Abulma

Bbootstrap

Ctailwind

Dfoundation

Attempts:

3 left

💡 Hint

Common Mistakes

Using other CSS framework names that are not supported by default.

The command bin/rails css:install:tailwind installs Tailwind CSS bundling.

3fill in blank

hard

Complete the Tailwind directive inside application.css.

Ruby on Rails

@tailwind [1];

Drag options to blanks, or click blank then click option'

Abase

Bstyles.css

Capplication.js

Dbootstrap

Attempts:

3 left

💡 Hint

Common Mistakes

Importing JavaScript files or unrelated CSS files.

To include Tailwind CSS base layer, you use @tailwind base; in your CSS file.

4fill in blank

hard

Fill both blanks to configure the build command and output path in package.json.

Ruby on Rails

"scripts": { "build:css": "[1] input.css -o [2] --minify" }

Drag options to blanks, or click blank then click option'

Atailwindcss

Bapp/assets/builds/application.css

Cstylesheets/application.css

Dpostcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong command names or incorrect output paths.

The build command uses tailwindcss to process input.css and outputs to app/assets/builds/application.css.

5fill in blank

hard

Fill all three blanks to add the CSS build step to your Procfile.dev for development.

Ruby on Rails

css: [1] --watch [2] -o [3]

Drag options to blanks, or click blank then click option'

Atailwindcss

Binput.css

Capp/assets/builds/application.css

Dpostcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong commands or paths in the Procfile.

The Procfile.dev runs tailwindcss --watch input.css -o app/assets/builds/application.css to rebuild CSS on changes.