如何阻止 TailwindCSS 删除未使用的样式

Question

好的，所以我要将我的 Laravel 项目投入生产。我在本地主机上测试了所有内容，它使用 Tailwind 3 完美运行。然而，当我运行一些 PHP artisan 命令清除所有缓存等时，migrate:fresh 我的数据库，然后运行 npm run dev，我注意到 Tailwind 删除了我在播种博客中使用的样式（我使用种子来播种假博客 posts 并查看它们的外观）。

例如，我将 Typography Tailwind 插件与实用程序一起使用-class prose 等等。当我运行 migrate:fresh 和假博客 post 从数据库中删除，然后清除 Laravel 缓存，并且运行 npm run dev，我注意到所有prose 样式正在从 app.css 中删除。我当然不希望这样，因为这应该应用于我将在生产中提交的每个博客 post。

那么如何阻止 Tailwind 删除这些样式呢？我目前拥有所有我需要的东西，我不想删除任何其他东西。

webpack.mix

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

    /*
     |--------------------------------------------------------------------------
     | Mix Asset Management
     |--------------------------------------------------------------------------
     |
     | Mix provides a clean, fluent API for defining some Webpack build steps
     | for your Laravel applications. By default, we are compiling the CSS
     | file for the application as well as bundling up all the JS files.
     |
     */

    mix.js("resources/js/app.js", "public/js")
        .vue()
        .postCss("resources/css/app.css", "public/css", [
            require("postcss-import"),
            require("tailwindcss"),
            require("autoprefixer"),
        ]);

tailwind.config.js

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

    module.exports = {
        darkMode: "class",
        content: [
            "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
            "./storage/framework/views/*.php",
            "./resources/views/*.blade.php",
            "./resources/views/components/*.blade.php",
            "./resources/views/auth/*.blade.php",
            "./resources/views/layouts/*.blade.php",
            "./resources/js/components/categories/*.vue",
            "./resources/js/components/**/*.vue",
        ],

        theme: {
            screens: {
                xs: "364px",

                sm: "430px",

                sd: "644px",

                md: "768px",

                lg: "1024px",

                xl: "1155px",

                "2xl": "1280px",
            },
            extend: {
                fontFamily: {
                    sans: ["Nunito", ...defaultTheme.fontFamily.sans],
                },
                typography: ({ theme }) => ({
                    white: {
                        css: {
                            "--tw-prose-body": theme("colors.white"),
                            "--tw-prose-headings": theme("colors.blue[400]"),
                            "--tw-prose-lead": theme("colors.purple[700]"),
                            "--tw-prose-links": theme("colors.blue[800]"),
                            "--tw-prose-bold": theme("colors.blue[800]"),
                            "--tw-prose-counters": theme("colors.blue[900]"),
                            "--tw-prose-bullets": theme("colors.blue[900]"),
                            "--tw-prose-hr": theme("colors.blue[800]"),
                            "--tw-prose-quotes": theme("colors.blue[800]"),
                            "--tw-prose-quote-borders": theme("colors.blue[800]"),
                            "--tw-prose-captions": theme("colors.blue[800]"),
                            "--tw-prose-code": theme("colors.blue[800]"),
                            "--tw-prose-pre-code": theme("colors.blue[200]"),
                            "--tw-prose-pre-bg": theme("colors.gray[900]"),
                            "--tw-prose-th-borders": theme("colors.blue[300]"),
                            "--tw-prose-td-borders": theme("colors.blue[200]"),
                        },
                    },
                    black: {
                        css: {
                            "--tw-prose-body": theme("colors.black"),
                        },
                    },
                }),
            },
        },

        plugins: [
            require("@tailwindcss/forms"),
            require("@tailwindcss/typography"),
        ],
    };

Answer 1

Tailwind 将仅包括它通过扫描 tailwind.config.js 中的 content 数组中指定的文件找到的类。如果您想要包含仅在您的动态内容中的额外类，您可以在您的配置中将这些类列入白名单。例如：

module.exports = {

  ...

  safelist: [
    'prose',
    'prose-xl',
  ],
  
  ...

}

参见：https://tailwindcss.com/docs/content-configuration#safelisting-classes

如何阻止 TailwindCSS 删除未使用的样式

How to stop TailwindCSS from deleting unused styles

production

laravel

tailwind-css

tailwind-3