如何在Rails 7中导入Tailwind插件

Question

我试图在我的Rails 7应用程序中使用npm软件包“尾风-翻转”。包文档有以下说明：

安装裁剪-翻转包：

使用NPM安装

npm install tailwindcss-flip --save-dev

使用Yarn安装

纱加尾纱

将插件添加到您的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，这也是默认的。它使用独立的顺风可执行https://tailwindcss.com/blog/standalone-cli，它与第三方插件捆绑在一起。因此，@tailswindcss/*中的任何插件都应该开箱即用。

要使用任何其他的顺风插件，您必须运行一个完整的node.js版本的顺风。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资产管道(链轮)提供服务。如果您遇到链轮错误，请重新启动所有操作，清除缓存，检查app/assets/config/manifest.js以包含//= link_tree ../builds。

Answer 2

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

1针所需的利盘

$ ./bin/importmap pin tailwindcss-flip

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

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

3-在视图中使用dir=rtl即可

4-利润:)