使用 Tailwindcss 和 laravel-vite-plugin 构建单独的 CSS 文件答案

【问题标题】：Build separate CSS files using Tailwindcss and laravel-vite-plugin使用 Tailwindcss 和 laravel-vite-plugin 构建单独的 CSS 文件
【发布时间】：2022-10-22 06:31:09
【问题描述】：

我正在尝试使用 Tailwindcss、Laravel 和 vite-plugin 构建两个单独的 CSS 文件。
这两个 css 文件使用不同的配置，但我不知道如何指定正确的tailwind.config.js对于每个构建。

应用程序.css应该使用tailwind.config.js
邮件.css应该使用尾风-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")],
}

尾风-mail.config.js

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

【问题讨论】：

试图也弄清楚这一点。由于原始文章是针对 webpack 的，因此无法在网上找到任何与 vite 相关的内容。如果您设法弄清楚，请创建一个答案。
@m33ts4k0z 抱歉，我还没有弄清楚。

标签： laravel tailwind-css vite

【解决方案1】：

我自己没试过然而，但是阅读 Tailwind CSS v3.2 的 release notes 应该很容易使用 @config <filename> 拆分为两个配置文件：

应用程序.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,
        })
    ]
})

【讨论】：