How to use multiple Tailwind CSS configs with ViteJS

However sometimes you’ll want to have two separate config files which compile into different CSS files. An example for this may be a Craft CMS multi-site project which has two separate brands, or perhaps you have an application which needs different styles for the front & backend.

Within this article, I’ll explain how you can do this using ViteJS.

Getting Started

The first step is making sure you have Tailwind, PostCSS and ViteJS installed on your project. This can be done using npm:

npm i tailwindcss postcss vite

You can create your tailwind config files using the command line:

npx tailwindcss init tailwind.primary.config.mjs
npx tailwindcss init tailwind.secondary.config.mjs

Why MJS?

A file with .mjs extension is a JavaScript source code file that is used as an ECMA Module. More information on using .mjs can be found here.

The reason we suggest this for the tailwind configs, is because you can import Tailwind plugins, such as Tailwind Forms, into your config file, and still include this file later on into the main CSS markup.

For example, your tailwind.config can look like this:

import tailwindForms from "@tailwindcss/forms";
export default {
 plugins: [tailwindForms],
};

If you only have one config file, you can go with the default JS extension.

PostCSS & ViteJS Setup

You’ll need to create a postcss.config.js file in the root of your project, and then import Tailwind as a PostCSS plugin. With that, you can import your Tailwind Config files into PostCSS:

import tailwindCss from "tailwindcss";
import tailwindPrimary from "./tailwind.primary.config.mjs";
import tailwindSecondary from "./tailwind.secondary.config.mjs";

export default {
 tailwindCss(tailwindPrimary),
 tailwindCss(tailwindSecondary)],
};

ViteJS also has its own config file, vite.config.js, which you will need to include the above PostCSS file. This can be done by importing the file and including it within the CSS ViteJS option:

import postcss from "./postcss.config.js";

export default defineConfig(({ command, mode }) => {
	return {
		css: {
            postcss,
        },
	}
});

CSS Files Setup

The final step is to make sure your CSS stylesheets include the correct config file.

Thankfully, back in October 2022 with the release of Tailwind CSS v3.2, this has been made quite easy using the @configdirective.

This directive means you can specify which Tailwind Config to use per file.

/*
 App (Entry point)
 ========================================
*/

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@config './tailwind.primary.config.mjs';
/* or */
@config './tailwind.secondary.config.mjs';

As we’re using PostCSS Import, we need to make sure the @config sits at the end of our stylesheet.

You can then include either stylesheet in a JS file:

import "@/css/app.css";

Each JS file can then be included within your project, to produce two separate CSS files using your 2 different configs!