How to import Tailwind plugin in Rails 7

Question

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).

Generalization

Answer 1

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.

Revocation

If you originally had the "tailwindcss-rails" gem installed, make sure to remove Tailwind from Procfile.dev as well! – Enjoyment

Answer 2

Here's my working setup with a Tailwind plugin (tw-elements), Rails 7, importmaps -- notably using NO nodejs, package.json, esbuild/webpack, etc.

After running:

bin/importmap pin --download tw-elements
bin/importmap pin --download tw-elements/dist/plugin.cjs

I have in my config/importmap.rb:

pin "tw-elements", to: "tw-elements.js", preload: true # @1.1.0
pin "tw-elements/dist/plugin.cjs", to: "tw-elements--dist--plugin.cjs.js" # @1.1.0

I reference these from config/tailwind.config.js thus:

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './vendor/javascript/tw-elements.js',  // TW-ELEMENTS //
  ],
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require('../vendor/javascript/tw-elements--dist--plugin.cjs.js'), // TW-ELEMENTS //
  ],
}

Note the ../ is required in one place, but forbidden in the other! That's because when we call require in the plugins section our working dir is RAILS_ROOT/config, but in content the paths are relative to RAILS_ROOT.

Behavior may vary slightly for different plugins, but this should provide a solid foundation.

Decuple

Answer 3

I added tailwindcss-fluid-type to my rails app that uses gem 'tailwindcss-rails' by downloading plugin to vendor/javascript/tailwindcss-fluid-type.js

and then sourcing it in config/tailwind.config.js as in

 ...
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("../vendor/javascript/tailwindcss-fluid-type"),
  ],
...

you can download easier by running bin/importmap pin tailwindcss-fluid-type, but it will also pin it in importmap, which you don't need, so remove it from there.

Archduchess

Answer 4

There's another option if you want to use importmap.

1 - pin required libs

$ ./bin/importmap pin tailwindcss-flip

2 - add following code to your layout file in head section

    <script>
      tailwind.config = {
        plugins: [
          require('@tailwindcss/typography'),
          require("tailwindcss-flip"),
        ],        
      }      
    </script>

3 - just use dir=rtl in your views

4 - PROFIT!!! :)

Gray

This doesn't seem to work, it fails in the browser console with Uncaught ReferenceError: tailwind is not defined – Gaspard