title: How to change tailwind-config.js dynamically based on user settings in rails
body: <p>I have a Rails 6 app set up to use <a href="https://tailwindcss.com/docs/installation/" rel="noreferrer">Tailwind CSS</a> with Webpacker similarly to how it's done in <a href="https://gorails.com/episodes/tailwind-css-framework-with-rails" rel="noreferrer">this GoRails tutorial</a>.</p>
  
  <p>I want to be able to change the Tailwind defaults dynamically based on the controller and action so that it's very easy for users to "skin" sections of the site by selecting a few options that then dynamically adjust a few of the Tailwind config options. (An example of how this could be used would be users logged into the admin area of the site changing their font family and background color to match their brand.)</p>
  
  <p>I can't just add a stylesheet to the layout based on a conditional because I'd have to override all of the instances where a Tailwind css variable I want to change (like "sans-serif"). That would be a lot of work and brittle to maintain as Tailwind evolves.</p>
  
  <p>It would be ideal if there was a way to dynamically insert choices selected by the user into the Tailwind config file (<a href="https://gist.github.com/leemcalilly/f3519888f3adb5a7f33cce26cc11baf4" rel="noreferrer">/javascript/stylesheets/tailwindcss-config.js</a>), but I'm not sure how to do this.</p>
  
  <p>Also is there a better way to do this in Rails when using Tailwind? It seems like there should be some way to use Javascript from the controller to dynamically change the settings in my tailwindcss-config.js (The Tailwind config file is <a href="https://tailwindcss.com/docs/configuration/" rel="noreferrer">explained here</a>). So, something in that file like this:</p>
  
  <pre><code>theme: {
      fontFamily: {
        display: ['Gilroy', 'sans-serif'],
        body: ['Graphik', 'sans-serif'],
      },
  </code></pre>
  
  <p>What was a font stack hard-coded as a configuration in Tailwind would become this:</p>
  
  <pre><code>theme: {
      fontFamily: {
        display: DYNAMICALLY INSERTED FONT STACK,
        body: ANOTHER DYNAMICALLY INSERTED FONT STACK,
      },
  </code></pre>
  
  <p>How would you do this in Rails? I have that Tailwind config file living at /javascript/stylesheets/tailwindcss-config.js. Is this possible to do with Webpack in rails? Is this even the correct approach to take with Rails 6 using Webpacker + Tailwind?</p>