无法在 Rails 7 中使用 tailwind 添加 ant design 样式表
Unable to add ant design stylesheets with tailwind in Rails 7
我使用 rails new demo -j esbuild --css tailwind 创建了一个 Rails 7 应用程序。
我正在为组件使用 antd 包，并希望将 ant design 样式表与 tailwind 样式表一起使用。
Tailwind has a way 将外部样式表添加到其默认样式。我使用它并将 application.tailwind.css 文件设置为：
@import "~antd/dist/antd.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
现在，当我 运行 ./bin/dev 时，antd 样式既未应用，生成的 app/assets/builds/application.css 文件中也不存在 类 样式。
看起来 tailwind 覆盖了 ant 设计样式。
如果我保留 application.tailwind.css 并添加
import 'antd/dist/antd.css';
到我的 index.js 根文件，只有这样 antd 样式才会被应用并出现在生成的 app/assets/builds/application.css 中。但是随后删除了 tailwindcss 类。
如何在生成的 app/assets/builds/application.css 中同时拥有 ant 设计风格和 tailwind 风格？
这就是我最终将 Rails 7 中自己的样式表与 esbuild 和 TailwindCSS 链接起来的方式。
目前，如果您 运行 rails new demo --css tailwind Rails 将使用 tailwindcss-rails gem
但是，如果您像在创建新应用程序时使用 esbuild 那样传递 javascript 选项，它将改用 cssbundling-rails gem。 rails new demo -j esbuild --css tailwind.
css捆绑的文档-rails gem 说
If you want to use @import statements as part of your Tailwind
application.js file, you need to configure Tailwind to use postcss and
then postcss-import. But you should also consider simply referring to
your other CSS files directly, instead of bundling them all into one
big file. It's better for caching, and it's simpler to setup. You can
refer to other CSS files by expanding the stylesheet_link_tag in
application.html.erb like so: <%= stylesheet_link_tag "application",
"other", "styles", "data-turbo-track": "reload" %>.
https://github.com/rails/cssbundling-rails#how-do-i-import-relative-css-files-with-tailwind
我在 app/assets/stylesheets/users.css
下创建了一个名为 users 的新 css 文件
在 application.html.erb 我在 stylesheet_link_tag.
的 application 样式表之后添加了新的 users 样式表
<%= stylesheet_link_tag "application", "users", "data-turbo-track": "reload" %>
在 app/assets/config/manifest.js 图像和构建之后添加 //= link users.css。
我使用 rails new demo -j esbuild --css tailwind 创建了一个 Rails 7 应用程序。
我正在为组件使用 antd 包，并希望将 ant design 样式表与 tailwind 样式表一起使用。
Tailwind has a way 将外部样式表添加到其默认样式。我使用它并将 application.tailwind.css 文件设置为：
@import "~antd/dist/antd.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
现在，当我 运行 ./bin/dev 时，antd 样式既未应用，生成的 app/assets/builds/application.css 文件中也不存在 类 样式。
看起来 tailwind 覆盖了 ant 设计样式。
如果我保留 application.tailwind.css 并添加
import 'antd/dist/antd.css';
到我的 index.js 根文件，只有这样 antd 样式才会被应用并出现在生成的 app/assets/builds/application.css 中。但是随后删除了 tailwindcss 类。
如何在生成的 app/assets/builds/application.css 中同时拥有 ant 设计风格和 tailwind 风格？
这就是我最终将 Rails 7 中自己的样式表与 esbuild 和 TailwindCSS 链接起来的方式。
目前，如果您 运行 rails new demo --css tailwind Rails 将使用 tailwindcss-rails gem
但是，如果您像在创建新应用程序时使用 esbuild 那样传递 javascript 选项，它将改用 cssbundling-rails gem。 rails new demo -j esbuild --css tailwind.
css捆绑的文档-rails gem 说
If you want to use @import statements as part of your Tailwind application.js file, you need to configure Tailwind to use postcss and then postcss-import. But you should also consider simply referring to your other CSS files directly, instead of bundling them all into one big file. It's better for caching, and it's simpler to setup. You can refer to other CSS files by expanding the stylesheet_link_tag in application.html.erb like so: <%= stylesheet_link_tag "application", "other", "styles", "data-turbo-track": "reload" %>.
https://github.com/rails/cssbundling-rails#how-do-i-import-relative-css-files-with-tailwind
我在 app/assets/stylesheets/users.css
users 的新 css 文件
在 application.html.erb 我在 stylesheet_link_tag.
application 样式表之后添加了新的 users 样式表
<%= stylesheet_link_tag "application", "users", "data-turbo-track": "reload" %>
在 app/assets/config/manifest.js 图像和构建之后添加 //= link users.css。