Ralph J. Smit Laravel Software Engineer
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 install -D tailwindcss postcss autoprefixernpx 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
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
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
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")]);
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.
Published by Ralph J. Smit on in Tailwind-css. Last updated on 21 June 2022.
Like what you read?
Get notified when I publish something new, and unsubscribe at any time.