如何在 Rails 7 中导入 Tailwind 插件答案

【问题标题】：How to import Tailwind plugin in Rails 7如何在 Rails 7 中导入 Tailwind 插件
【发布时间】：2022-07-13 08:24:00
【问题描述】：

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

安装tailwindcss-flip包：

使用 NPM 安装

npm install tailwindcss-flip --save-dev

使用 Yarn 安装

yarn add tailwindcss-flip --dev

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

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

Error: Cannot find module 'tailwindcss-flip'

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

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-7 hotwire-rails

【解决方案1】：

我假设您使用的是tailwindcss-rails gem。即使您运行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

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

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

yarn add tailwindcss-flip --dev

将插件添加到顺风配置。默认为tailwind.config.js（独立版tailwindcss-rails使用config/tailwind.config.js，你不再需要了）

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

在您的布局中，您应该只有application 样式表。删除stylesheet_link_tag "tailwind"

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

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

yarn build:css --watch

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

【讨论】：

【解决方案2】：

如果您想使用 importmap，还有另一种选择。

1 - pin 所需的库

$ ./bin/importmap pin tailwindcss-flip

2 - 在 head 部分的布局文件中添加以下代码

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

3 - 只需在您的视图中使用dir=rtl

4 - 利润！！！ :)

【讨论】：