ruby-on-railsruby-on-rails-7hotwire-rails

How to import Tailwind plugin in Rails 7


I'm trying to use npm package 'tailwindcss-flip' in my Rails 7 app. The package docs have the following instructions:

Install tailwindcss-flip package:

Install using NPM

npm install tailwindcss-flip --save-dev

Install using Yarn

yarn add tailwindcss-flip --dev

Add plugin to your tailwind.conf.js file: plugins: [require("tailwindcss-flip")]

My question is, I did pin the package in importmap, but I got the following error:

Error: Cannot find module 'tailwindcss-flip'

Any idea how this can work in Rails 7 (No Webpacker).


Solution

  • I assume you're using tailwindcss-rails gem. That is the default even if you run rails new app --css tailwind. It uses standalone tailwind executable https://tailwindcss.com/blog/standalone-cli which comes bundled with first party plugins. So any plugin in @tailswindcss/* should work out of the box.

    To use any other tailwind plugins you must run a full node.js version of tailwind. The Rails 7 way is to use cssbundling-rails.

    # Gemfile
    # remove gem "tailwindcss-rails"
    gem "cssbundling-rails"
    
    bin/bundle install
    bin/rails css:install:tailwind
    

    Add build script to package.json

    "scripts": {
      "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
    }
    

    Add any plugin you like after that. In your case:

    yarn add tailwindcss-flip --dev
    

    Add plugins to tailwind config. By default it is tailwind.config.js (standalone tailwindcss-rails version uses config/tailwind.config.js which you don't need anymore)

    plugins: [
      require("tailwindcss-flip"),
    ]
    

    In your layout you should only have application stylesheet. Remove stylesheet_link_tag "tailwind"

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    

    To start compiling your css, run the build script from package.json

    yarn build:css --watch
    

    This should output app/assets/builds/application.css file. It is served by rails asset pipeline (sprockets). In case you get sprocket errors, restart everything, clear cache, check app/assets/config/manifest.js to include //= link_tree ../builds.


    You should also have bin/dev script and Procfile.dev. Run:

    bin/dev
    

    to start rails server and tailwind.