我有一个 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 中的 …