- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在我的 Rails 7 应用程序中使用 npm 包“tailwindcss-flip”。包文档具有以下说明:
安装tailwindcss-flip包:
Install using NPM
npm install tailwindcss-flip --save-dev
使用 Yarn 安装
yarn add tailwindcss-flip --dev
将插件添加到您的 tailwind.conf.js 文件:插件:[require("tailwindcss-flip")]
我的问题是,我确实将包固定在 importmap 中,但出现以下错误:
Error: Cannot find module 'tailwindcss-flip'
知道这在 Rails 7 中如何工作(没有 Webpacker)。
最佳答案
我假设您正在使用 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 配置中。默认是 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 asset pipeline (sprockets) 提供服务。如果您遇到 sprocket 错误,请重新启动一切,清除缓存,检查 app/assets/config/manifest.js
以包含 //= link_tree ../builds
。
关于ruby-on-rails - 如何在 Rails 7 中导入 Tailwind 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71640507/
我是一名优秀的程序员,十分优秀!