Build separate CSS files using Tailwindcss and laravel-vite-plugin

Question

I'm trying to build two separate CSS files using Tailwindcss, Laravel and vite-plugin.
The two css files use different configuration, but I have no idea how specify the correct tailwind.config.js for each builds.

app.css should use tailwind.config.js
mail.css should use tailwind-mail.config.js

vite.config.js

import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
            refresh: true,
        })
    ]
})

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
    theme: {},
    plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
}

tailwind-mail.config.js

module.exports = {
    content: ["./resources/views/mails/**/*.blade.php"],
    theme: {},
    plugins: [require("@tailwindcss/typography")],
}

Trying to also figure this out. Haven't been able to find anything online related to vite since the original article was for webpack. Please create an answer if you managed to figure it out. — m33ts4k0z
– m33ts4k0z, Commented Aug 26, 2022 at 16:56
@m33ts4k0z I think the release of Tailwind CSS 3.2 will solve this issue :) — Clément Baconnier
– Clément Baconnier, Commented Oct 22, 2022 at 11:07

Clément Baconnier · Accepted Answer · 2023-01-13 21:50:10Z

2

I haven't try myself yet, but reading the release notes of Tailwind CSS v3.2 it should be fairly easy to split into two CSS files using @config <filename>:

app.css

@config "./tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

mail.css

@config "./tailwind.mail.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

vite.config.js

import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
            refresh: true,
        })
    ]
})

edited Jan 13, 2023 at 21:50

answered Oct 21, 2022 at 22:31

Clément Baconnier

6,1676 gold badges35 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Code Flow Over a year ago

@config "./tailwind.mail.config.js"; missing semicolon

Collectives™ on Stack Overflow

Build separate CSS files using Tailwindcss and laravel-vite-plugin

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related