CODEWITHSUNDEEP
vue.jstailwind-cssvite
Max
Max

Reputation: 629

VueJS/Tailwind CSS/VITE: use env variables as colors for a Tailwind theme

I have a VueJS setup with Vite, Tailwind CSS and postcss, and would like to define different colors using variables in a .env.name file so that I can apply different color themes depending where the code is deployed.

I tried with a .env file containing

VITE_COLOR="FF0000"

and an import within the tailwind.config.js

...
theme: {
    colors: {
       primary: import.meta.env.COLOR
    }
}
...

However, I get the following error:

SyntaxError: Cannot use 'import.meta' outside a module

What do I have to change to get this to work or is there an even better method?

Upvotes: 5

Views: 4741

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14193

Tailwind config is CommonJS file (not module) so you cannot use ES6 features like import

You can install package called dotenv

npm i dotenv

Require it on top of your tailwind config file like

require('dotenv').config()

module.exports = {/** */}

create color variable in .env. Note as we require it out of Vite's scope it may not be prefixed with VITE_

ANY_COLOR='#ffc8dd'

Now you can access it in tailwind config

theme: {
    colors: {
       primary: process.env.ANY_COLOR
    }
}

This will work BUT if you change color in .env file you need to rebuild your styles again. If it is OK for you (one deployment - one color anyway) - fine. I personally would suggest another solution based on CSS variables - link to CanIUse

Define variable in CSS file or create style tag within <head> tag in index.html

:root {
    --theme-color: #ffc8dd;
}

and in config

theme: {
    colors: {
       primary: 'var(--theme-color)'
    }
}

And that's it - no extra packages, extra work and if you change CSS variable, changes will be applied on the fly - even in production as we are using CSS functionality

Upvotes: 8

Related Questions