如何在 Rails 7 中导入 Tailwind 插件

Question

我正在尝试在 Rails 7 应用程序中使用 npm 包“tailwindcss-flip”。包文档有以下说明：

安装 tailwindcss-flip 包：

使用 NPM 安装

npm install tailwindcss-flip --save-dev

使用纱线安装

纱线添加 tailwindcss-flip --dev

将插件添加到 tailwind.conf.js 文件中： plugins: [require("tailwindcss-flip")]

我的问题是，我确实将包固定在 importmap 中，但出现以下错误：

Error: Cannot find module 'tailwindcss-flip'

知道这如何在 Rails 7 中工作（没有 Webpacker）。

Answer 1

我假设你正在使用tailwindcss-rails宝石。即使您运行，这也是默认值rails new app --css tailwind。它使用独立的 tailwind 可执行文件https://tailwindcss.com/blog/standalone-cli，它与第一方插件捆绑在一起。所以任何插件都@tailswindcss/*应该开箱即用。

要使用任何其他 tailwind 插件，您必须运行完整的 node.js 版本的 tailwind。Rails 7 的方式是使用cssbundling-rails.

# Gemfile
# remove gem "tailwindcss-rails"
gem "cssbundling-rails"

bin/bundle install
bin/rails css:install:tailwind

将构建脚本添加到 package.json

bin/bundle install
bin/rails css:install:tailwind

之后添加您喜欢的任何插件。在你的情况下：

yarn add tailwindcss-flip --dev

将插件添加到 tailwind 配置。默认情况下是tailwind.config.js（独立tailwindcss-rails版本使用config/tailwind.config.js您不再需要的）

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

在你的布局中你应该只有application样式表。消除stylesheet_link_tag "tailwind"

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

要开始编译 css，请运行构建脚本package.json

yarn build:css --watch

这应该输出app/assets/builds/application.css文件。它由轨道资产管道（链轮）提供服务。如果出现 sprocket 错误，请重新启动一切，清除缓存，检查app/assets/config/manifest.js以包含//= link_tree ../builds.

您还应该有bin/dev脚本和Procfile.dev. 跑步：

yarn add tailwindcss-flip --dev

启动 Rails 服务器和 Tailwind。