npm run prod 和 dev 中的 TailwindUI 差异

Posted 2023-03-07

【中文标题】npm run prod 和 dev 中的 TailwindUI 差异

【英文标题】：TailwindUI difference in npm run prod & dev

【发布时间】：2021-08-08 17:11:42

【问题描述】：

当我运行npm run dev 时，它会显示我的 TailwindUI 组件的正确输出：

但是当我运行npm run prod 时，它不再识别所有颜色。

怎么了？

这是我tailwind.config.js的配置：

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = 
    darkMode: false, // or 'media' or 'class'
    theme: 
        extend: 
            fontFamily: 
                sans: ["Inter var", ...defaultTheme.fontFamily.sans],
            ,
            colors: 
                "yellow-50": "#FFEDCC",
                "yellow-100": "#FFDEA3",
                "yellow-200": "#FFD07A",
                "yellow-300": "#FFC152",
                "yellow-400": "#FFB329",
                "yellow-500": "#FFA400",
                "yellow-600": "#D48902",
                "yellow-700": "#AA6F03",
                "yellow-800": "#815404",
                "yellow-900": "#583A04"
            ,
        ,
    ,
    purge: [
        "./storage/framework/views/*.php",
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    variants: 
        extend: 
            opacity: ["disabled"],
        ,
        backgroundColor: ["responsive", "hover", "group-hover"],
        textColor: ["responsive", "hover", "group-hover"],
    ,
    plugins: [
        require("@tailwindcss/forms"),
    ],
;

还有webpack.mix.js：

const mix = require("laravel-mix");


const tailwindcss = require("tailwindcss");
mix.js("resources/js/app.js", "public/js")
    .vue()
    .sourceMaps()
    .postCss("resources/css/app.css", "public/css", [
        tailwindcss("./tailwind.config.js"),
    ]);

const webpack = require("webpack");

mix.webpackConfig(
    plugins: [
        new webpack.DefinePlugin(
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: true,
        ),
    ],
);

可能 PostCSS 选项出了点问题，但是什么？ 视图位于resources/js/views/Dashboard.vue。

【问题讨论】：

可能缺少一些z-index 扩展？你是如何让你的图层一层层叠加的？

尝试使用您的开发工具检查 DOM 并查找生产和开发之间缺少的类。

有时 purgecss 会删除未明确提及的类，并且如果您通过属性和伪 css（如 ::before、::after）进行 css。

可以分享resources/js/views/Dashboard.vue的内容吗？或者至少只是相关的 html/Tailwind 类。

【参考方案1】：

如果您的配置在开发中运行良好而不是在生产中，则意味着您的 package.json 文件中有错误。

您已将任何文件包含在 devDependencies 中，这就是它在开发阶段工作的原因。当您进入生产级别时，它无法识别软件包，因为它们已添加到 devDependencies。

因此，将生产中所需的所有包从项目的devDependencies 移至dependencies。

【讨论】：

远射这个，甚至没有看到他的package.json。可能是这里的清除工作不正常。但是 OP 没有给出任何回应，所以是的，就是这样。

开发中的东西绝对正确。如果purge 有一些错误，那么在开发阶段也应该是一个错误。这就是我拍摄这张照片的原因！

Tailwind 的清除仅用于生产环境。

不知道这一点。

这就是我这么说的原因。 ^^