How to use different Tailwind CSS configs with Laravel Mix

Tailwind CSS is a great way of writing CSS. It comes with a handy configuration file which you can use to specify some settings. However, sometimes you'll just want to compile two or more stylesheets, each with a different configuration file. For example, a separate one for the back-end and a separate one for the frontend.

In this article I'll show you how to do exactly that with Laravel Mix.

Installing Tailwind CSS & Laravel Mix

Installing Tailwind CSS with Laravel Mix is very straightforward. First, start by installing Tailwind and it's dependencies via npm:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Next, we'll use Tailwind CSS as a PostCSS plugin. Usually you'll do that like this:

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
  ]);

Using Tailwind CSS with multiple configs in Laravel Mix

The above process works fine for most use cases. By default, this assumes a tailwind.config.js file in your root directory.

In order to use a custom Tailwind CSS config file with Laravel Mix, you'll need to import Tailwind CSS first at the top of your webpack.mix.js file:

 const mix = require('laravel-mix');
+const tailwindcss = require('tailwindcss'); 

Next, you can update your .postCss call like this. This instructs Tailwind CSS to use the tailwind-admin.config.js file in the root of your project instead of the tailwind.config.js file.

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    tailwindcss("tailwind-public.config.js")
  ]);

You can also use multiple different configs in the same webpack.mix.js file:

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    tailwindcss("tailwind-public.config.js")
  ])
  .postCss("resources/css/admin.css", "admin/css", [
    tailwindcss("tailwind-admin.config.js")
  ]);

Conclusion

As you've seen, it's very easy to use multiple or different Tailwind CSS configuration files with Laravel Mix. It just requires the right trick.

But believe me, it took me quite a while to get this all working, also in GitHub Actions.

If this was helpful and you're interested in more articles and handy tips, you can always subscribe to my newsletter. Every now and then I'll send you an e-mail with some new articles on my website.