Setup Tailwind in Rails

Install gem

Create new Rails project with tailwind

rails new myapp --css tailwind

Add to existing project

Add to Gemfile:

./bin/bundle add tailwindcss-rails

Run:

./bin/rails tailwindcss:install

What tailwindcss-rails does

• Creates config/tailwind.config.js
• Create app/assets/stylesheets/application.tailwind.css

Tasks available

rails tailwindcss:watch

Start watching the input file and generate the output file. You can also run ./bin/dev which will start the watch alongside the Rails server.

rails tailwindcss:build

Generates app/assets/builds/tailwind.css

Add the following to your workspace settings:

(Optional) Configure VSCode

{
  "settings": {
    "css.validate": false,
    "editor.quickSuggesions": {
      "strings": true
    }
  }
}

Sources

• Official docs