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).
CodePudding user response:
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 you 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
.