Custom properties (a.k.a CSS Variables)

One (relatively) popular pattern for allowing for a little bit of runtime configuration of tailwind based apps is to use css vars in conjunction with the theme config.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        main: "var(--main)",
        background: "var(--background)",
        header: "var(--header)",
        accent: "var(--accent)",
      },
    },
  },
};

Then, at runtime we can set those variables and allow the user to pick a primary color for example. This pattern doesn’t translate well to RN for the simple reason that we don’t have css variables. However, we do have the stylesheet, and that is injected into the TailwindProvider at runtime.

What could be interesting is to allow for a way to intercept the stylesheet before it’s injected into the TailwindProvider by babel, transform it (replace colors for example), and then pass it through to the TailwindProvider.

I think this might be possible right now using the Tailwind CLI approach, but I’d love to be able to do it using Babel too.

[marklawlor]

I’m going to close this issue and track it via the Feature Request Project.

I like to keep the repo’s issues focusing on bugs/problems.

Your welcome to still comment/ask questions. I’ll reopen the issue when development has started.

[dohomi]

@winterscar how did you solve CSS Vars support with the CLI? In the output of npx tailwindcss -i global.css --postcss postcss.config.js the css vars and @media queries are not part of the output.