小编giu*_*ulp的帖子

如何根据 Rails 中的用户设置动态更改 tailwind-config.js

我有一个 Rails 6 应用程序设置为将Tailwind CSS与 Webpacker一起使用,这与 GoRails 教程中的做法类似。

我希望能够根据控制器和操作动态更改 Tailwind 默认值,以便用户通过选择一些选项然后动态调整一些 Tailwind 配置选项来轻松“皮肤”站点的部分。(如何使用它的一个例子是用户登录网站的管理区域,更改他们的字体系列和背景颜色以匹配他们的品牌。)

我不能仅仅根据条件将样式表添加到布局中,因为我必须覆盖我想要更改的 Tailwind css 变量的所有实例(例如“sans-serif”)。随着 Tailwind 的发展,这将需要大量工作并且难以维护。

如果有一种方法可以将用户选择的选项动态插入到 Tailwind 配置文件 ( /javascript/stylesheets/tailwindcss-config.js ) 中,那将是理想的,但我不确定如何执行此操作。

使用 Tailwind 时,是否有更好的方法在 Rails 中执行此操作?似乎应该有某种方法可以使用控制器中的 Javascript 来动态更改我的 tailwindcss-config.js 中的设置(这里解释了Tailwind 配置文件)。因此,该文件中的内容如下:

theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
Run Code Online (Sandbox Code Playgroud)

在 Tailwind 中硬编码为配置的字体堆栈会变成这样:

theme: {
    fontFamily: {
      display: DYNAMICALLY INSERTED FONT STACK,
      body: ANOTHER DYNAMICALLY INSERTED FONT STACK,
    },
Run Code Online (Sandbox Code Playgroud)

你将如何在 Rails 中做到这一点?我的 Tailwind 配置文件位于 /javascript/stylesheets/tailwindcss-config.js。这可能与 Rails 中的 …

css ruby-on-rails css-variables webpack tailwind-css

9
推荐指数
1
解决办法
5653
查看次数