使用 Tailwindcss 和 laravel-vite-plugin 構建單獨的 CSS 文件

Question

我正在嘗試使用 Tailwindcss、Laravel 和 vite-plugin 構建兩個單獨的 CSS 文件。
這兩個 css 文件使用不同的配置，但我不知道如何為每個構建指定正確的tailwind.config.js 。

• app.css應該使用tailwind.config.js
• mail.css應該使用 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")],
}

Answer 1

我自己還沒有嘗試過，但是閱讀 Tailwind CSS v3.2 的發行說明應該很容易使用@config <filename>分成兩個 CSS 文件：

應用程序.css

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

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