Possible to dynamically add styles from config/plugin?

[mforcer]

I have a platform that 'rebrands' based on which organisation a user is associated with, similar to a white label solution for users (changing colours, etc..). I add each organisation's colours by extending colours in the tailwind config file but I'd like to automate it by pulling in the colours from an API, is this possible?

I come up with something like this but I don't think it actually fires off the request... is this possible in the config file?

// tailwind.config.js

const fetch = require("node-fetch")

const organisationColors = {}
const organisations = fetch("/api/organisations").then((response) => response.json())

organisations.map(o => {
  organisationColors["primary-" + o.slug] = o.primary_color
})

colors: {
        // ...
        organisationColors
}

The idea is that I then have colours available for each organisation primary-twitter, primary-facebook, for example.

Is there a solution for something like this?

It's probably worth adding I am using NextJS

[tlgreg]

module.exports needs to happen synchronously and currently tailwindcss expects the export to be the config object, not - for example - a promise.

postcss plugins are async and returning promises. I didn't look into it yet, but this means that it should be possible to handle an async function (or a promise) coming from tailwind.config.js.

With the current tailwind though, you could use a synchronous library to fetch the data or have it ready in a json file and require it in the config.

[mforcer]

Thanks for your thoughts, it's sparked an idea of something I can try.

[RobinBertilsson]

@mforcer Do you mind share how/if you managed to solve it?

[mforcer]

I believe I have a solution, but I'm yet to implement it.

Basically, I'll be installing node/npm on the server and using Laravel to execute console commands.

The plan is programmatically to edit the tailwind config file to add the new colours and then rebuild production assets.

I'd then like to use code to programmatically submit a commit to Github.

[Derick1530]

Did you manage to solve it?

[RobinBertilsson]

I ended up not using Tailwind, even thought i got it working.

The "Tailwind solution" was to basically configure Tailwind to point towards our custom CSS variables, which we then could define/load in runtime.

tailwind.config.ts

import { type Config } from "tailwindcss";

export default {
  theme: {
    colors: {
      red: {
        100: 'var(--brand-color-red-100)',
        // ...
      }
    }
  },
  // ...
} satisfies Config;

Then, we got a ThemeProvider (even thought it's techically not a "react provider"), that looks something like the following (simplified), but the main point is to load a css file containing theme variables runtime, and we also used a the linkNodeLoaded workaround in order to decrease the amount of CLS (Cumulative Layout Shift) since we offer branding of fonts and sizes, not only colors.

import { FunctionComponent, PropsWithChildren, useEffect, useState } from 'react'

export const ThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => {
  const [linkNodeLoaded, setLinkNodeLoaded] = useState<boolean>(false)

  useEffect(() => {
    const linkNode = document.createElement('link')

    linkNode.href = 'https://cdn.com/themes/<your-theme>.css'
    linkNode.rel = 'stylesheet'

    linkNode.addEventListener('load', () => setLinkNodeLoaded(true))
    linkNode.addEventListener('error', () => setLinkNodeLoaded(true))

    document.head.appendChild(linkNode)
  }, [])

  if (!linkNodeLoaded) {
    return null
  }

  return <>{children}</>
}

Hope it somewhat helps.

[Derick1530]

Yes! thank you a lot