Theming Tailwind with CSS Variables
Why Stack Overflow recommends it
Stack Overflow users link it when answering how to build switchable color themes in Tailwind, especially for making opacity utilities work with CSS variable colors.
Recommended by 2 people across 2 different months, 2022 to 2023.
What it is
A 27-minute screencast from Tailwind Labs showing how to build multi-theme designs in Tailwind CSS using CSS variables. It also covers the common problem of using color opacity utilities with colors defined as variables, and links to a playground with the source code.
What people said
Recommends Gabe · 2022-07 · Stack Overflow · on “What is the correct way to build multi-color template using Tailwind CSS?”
You can use CSS variables [LINK] for that. In your tailwind config, you create the brand colors as you did, but instead of hex color codes, you use for example 50: 'var(--brand-50)' . Then in your index.css you can add these variables to the base layer, like: @layer base { :root { --brand-50: #B0ECEC; } .theme-red { --brand-50: #BB0000; } } Now, if you add the class .theme-red to your body, text-brand-50 will be red. In this video of Tailwind labs [this video] it is fully explained. There is also explained how to deal with opacity, although since tailwind 3.1 there is an easier way of doing that [LINK] . Hope this helps.
Recommends Gabe · 2022-07 · Stack Overflow · on “Tailwind custom theme color opacity not being applied”
I think you are close, but you need add a function for that in your tailwind.config.js . Here is a playground from Tailwind Labs [LINK] , with a function called withOpacity in the config. In your tailwind config you can call it when defining a color: base: withOpacity('--base'), You can see the working in this video [this video] , from around 17 minutes until the end. They also explain why you should do it this way. Hope this helps. Edit: as suggested by Ed Lucas [LINK] , from Tailwind 3.1 on you can use a different approach [LINK] .
Recommends eYinka · 2023-01 · Stack Overflow · on “Template does'nt work with Tailwind in React”
In addition to pguardiano's answer, you may be able to achieve the same thing by calling the style attribute directly since postCSS only renders what is readily available in the template... In your case, you can send the hex code directly to the variable and pass it to the style attribute. Example: <div className="relative flex h-full w-full" style="{{ background: primaryColorThemeColor }}" > <img className="absolute bottom-0" src={photo} alt="personal-photo" /> </div> If you want to get your hands dirty and do things in a more interesting way, you can take advantage of Tailwind's theming functionality. It is explained well in this video: [this video] . Then you can update your CSS variables with
Cites NWOS · 2023-10 · Stack Overflow · on “TailwindCSS Custom Theme”
I want to create some varient of theme and able to switch between them in tailwind CSS I found a video on youtube on this topic in JS [this video] but i am using TS and a custom function called with opacity is not working properly. it is not showing color when using that function if we pass through var directly instead of custom function without applying opacity then it works global.css @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --primary-color: #847869; --secondary-color: #fae1c3; --primary-background-color: #202020; --secondary-background-color: #1d1d1d; --accentColor: #91170c; --robotoMono: "Roboto Mono", monospace; --barlow: "Barlow", sans-serif; } } html