如何在Rails中导入尾风插件7

Question

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

安装 tailwindcss-flip 软件包：

使用 NPM 安装

npm install tailwindcss-flip --save-dev

使用 Yarn 安装

纱线添加 tailwindcss-flip --dev

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

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

Error: Cannot find module 'tailwindcss-flip'

Any idea how this can work in Rails 7 (No Webpacker ）。

Answer 1

我假设您正在使用tailwindcss-rails GEM。即使您运行Rails New App -CSS Tailwind，也是默认的。它使用独立的尾风可执行文件 https://tailwindcss.coms.com/blog/blog/standalone-cli 使用第一方插件。因此，@tailswindcss/*中的任何插件都应开箱即用。

要使用其他任何尾风插件，您必须运行完整的Node.js版本的tailwind。 Rails 7方法是使用cssssbundling-rails。

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

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

将构建脚本添加到软件包。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.json运行构建脚本

yarn build:css --watch

此应该输出app/assets/assets/builds/application.css 文件。它由Rails Asset Pipeline（链轮）提供。如果您获得链轮错误，请重新启动所有内容，清除缓存，检查app/config/config/custest.js include // = link_tree ../ builds。

---

您还应该拥有bin/dev脚本和procfile.dev。运行：

bin/dev

启动Rails Server和Tailwind。

Answer 2

这是我的工作设置，它使用尾风插件（TW-Elements），Rails 7，ImportMaps-尤其是使用 no nodejs，package.json，Esbuild/webpack等。

运行之后：

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

我在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

我从config/tailwind.config.js中引用这些内容：请注意：

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 //
  ],
}

注意../代码>在一个地方需要，但在另一个地方禁止！那是因为当我们调用时，插件中需要 e节，我们的工作dir是rails_root/config，但在content> content中路径相对于rails_root。

不同插件的行为可能会略有不同，但这应该提供坚实的基础。

Answer 3

我将 tailwindcss-fluid-type 添加到我的 Rails 应用程序中，该应用程序通过下载插件来使用 gem 'tailwindcss-rails'
vendor/javascript/tailwindcss-fluid-type.js

然后在 config/tailwind.config.js 中获取它，因为

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

您可以通过运行 bin/ 更轻松地下载importmap 固定 tailwindcss-fluid-type，但它也会将其固定在 importmap 中，您不需要它，因此从那里将其删除。

Answer 4

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

1 - 固定所需的库

$ ./bin/importmap pin tailwindcss-flip

2 - 将以下代码添加到头部的布局文件中

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

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

4 - 利润！ :)