CODEWITHSUNDEEP
laraveltailwind-cssvite
Clément Baconnier
Clément Baconnier

Reputation: 6058

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

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.

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")],
}

Upvotes: 3

Views: 3164

Answers (1)

Clément Baconnier
Clément Baconnier

Reputation: 6058

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,
        })
    ]
})

Upvotes: 1

Related Questions