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

Question

好吧，我要把我的Laravel项目投入生产。我在本地主机上测试了所有内容，并且使用Tailwind 3进行了完美的测试。然而，当我运行一些PHP命令来清除所有缓存等等时，我注意到，当我运行migrate:fresh我的数据库，然后运行npm run dev时，我注意到Tailwind删除了我在播撒博客时使用的样式(我使用seed来播撒假博客文章并查看它们的样子)。

例如，我使用的是排版 Tailwind插件和实用程序类prose等等。当我运行migrate:fresh和从数据库中删除的假博客文章，然后清除Laravel缓存并运行npm run dev时，我注意到所有的prose样式都被从app.css中删除了。当然，我不想这样做，因为这应该应用在我将提交的每一篇博客文章中。

那么我怎样才能阻止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

“顺风”将只包括它通过扫描content数组中tailwind.config.js中指定的文件而找到的类。如果希望包含仅在动态内容中的其他类，则可以在配置中对这些类进行安全排序。例如：

module.exports = {

  ...

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

}

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