Как изменить tailwind-config. js динамически на основе пользовательских настроек в рельсах - PullRequest
Новая
       39

Как изменить tailwind-config. js динамически на основе пользовательских настроек в рельсах

0 голосов
/ 29 апреля 2020

У меня есть приложение Rails 6, настроенное для использования Tailwind CSS с Webpacker, аналогично тому, как это делается в этом руководстве по GoRails .

Я хочу уметь динамически изменять значения по умолчанию для Tailwind, основываясь на контроллере и действиях, так что пользователям будет очень просто «скинуть» разделы сайта, выбрав несколько параметров, которые затем динамически изменят несколько параметров конфигурации Tailwind. (Примером того, как это можно использовать, могут быть пользователи, вошедшие в административную область сайта, меняющие семейство шрифтов и цвет фона в соответствии со своим брендом.)

Я не могу просто добавить таблицу стилей в макет основанный на условном, потому что я должен был бы переопределить все случаи, где переменная Tailwind css, которую я хочу изменить (как "sans-serif"). По мере развития Tailwind было бы очень много работы и хрупкости.

Было бы идеально, если бы был способ динамически вставлять выбранные пользователем варианты в конфигурационный файл Tailwind ( / javascript / stylesheets / tailwind css -config. js), но я не уверен, как это сделать.

Также есть ли лучший способ сделать это в Rails при использовании Tailwind? Кажется, должен быть какой-то способ использовать Javascript из контроллера для динамического изменения настроек в моем попутном ветре css -config. js (Файл конфигурации Tailwind объяснен здесь ). Итак, что-то в этом файле выглядит следующим образом: 

theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },

Что такое стек шрифтов, жестко запрограммированный как конфигурация в Tailwind, может выглядеть так: 

theme: {
    fontFamily: {
      display: DYNAMICALLY INSERTED FONT STACK,
      body: ANOTHER DYNAMICALLY INSERTED FONT STACK,
    },

Как бы вы это сделали в Rails? У меня есть тот конфигурационный файл Tailwind, который находится по адресу /javascript/stylesheets/tailwindcss-config.js. Можно ли это сделать с Webpack в рельсах? Это даже правильный подход к Rails 6 с использованием Webpacker + Tailwind?

1 Ответ

0 голосов
/ 30 апреля 2020

У меня была такая же проблема сегодня. Это сработало для меня. 

# tailwind.config.js
theme: {
fontFamily: {
  custom: ['Gilroy', 'sans-serif']
},

и используйте его как 

#sample.html.erb
<span class="font-custom"> Hello Tailwind! </span>
...