How to get Vite environment variables in tailwind. Config .cjs file

In projects using TailwindCSS with Vite, you may need to adjust the TailwindCSS configuration based on different environments (e.g., development and production environments). Vite supports environment variables that can be referenced throughout the project, including in the tailwind.config.js file.

Steps:

1. Set Environment Variables: In the root directory of your Vite project, create different environment configuration files. For example, create a .env.development file for the development environment and a .env.production file for the production environment. In these files, define environment variables such as:

plaintext
// .env.development
VITE_API_URL=http://development-api.example.com

plaintext
// .env.production
VITE_API_URL=http://production-api.example.com

1. Reference Environment Variables in tailwind.config.js: In the tailwind.config.js file, use process.env to access these variables. For instance, you can define theme colors dynamically based on the environment:

javascript
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: process.env.VITE_PRIMARY_COLOR || '#ff3e00', // Use environment variable or provide default value
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

1. Configure Environment Variables in the Vite Configuration File: In the vite.config.js file, ensure proper configuration for environment files. Vite automatically loads .env files in the root directory by default, but you can explicitly specify the environment configuration files:

javascript
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  return {
    // Load environment-specific configuration files
    define: {
      'process.env': {
        ...process.env,
        ...require(`./.env.${mode}`)
      }
    },
  };
});

1. Test and Validate: Run your application in development or production mode and inspect styles using browser developer tools to confirm that configurations are applied correctly based on the environment variables.

Example:

Suppose you want to use blue as the theme color in development and green in production. Set VITE_PRIMARY_COLOR in the .env.development and .env.production files, then reference it in tailwind.config.js to define the color.

This approach enables flexible style adjustments across environments without modifying the core code logic.