Tailwind 完全编译 css，而不剥离未使用的类

Question

我有一个带有 Tailwind 的 Laravel 项目，并配置了 Webpack：

mix.js('resources/js/app.js', 'public/js')
  .postCss('resources/css/app.css', 'public/css', [
      require("tailwindcss"),
  ]);

这是我的 Tailwind.config：

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

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      fontFamily: {
         sans: ["Rubik", ...defaultTheme.fontFamily.sans],
      },
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      brandcolor: {
        50: "#f3d2e4",
        100: "#ff53aa",
        200: "#ff49a0",
        300: "#ff3f96",
        400: "#f8358c",
        500: "#ee2b82",
        600: "#e42178",
        700: "#da176e",
        800: "#d00d64",
        900: "#c6035a",
      },
      blue: {
        50: "#a6ecfd",
        100: "#50d4ff",
        200: "#46caff",
        300: "#3cc0f6",
        400: "#32b6ec",
        500: "#28ace2",
        600: "#1ea2d8",
        700: "#1498ce",
        800: "#0a8ec4",
        900: "#0084ba",
      },
      teal: colors.teal,
      yellow: colors.yellow,
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/typography"),
  ],
};

正如你所看到的，我改变了并添加了一些颜色。

当我的代码中有这个并编译它时：

<div class="bg-brandcolor-600"> 

它有效，但是当我将其更改为 时800，我必须重新编译它。

我需要更改什么才能使用所有可用选项编译完整的 css？所以我也可以做这样的事情：

<div class="bg-{{ $color ?? 'brandcolor' }}-600"> 

并将颜色作为我的代码中的变量。我知道，不建议这样做，但是对于这个项目来说 CSS 不必太小。

Answer 1

您可以指定safelist配置文件的部分。更多信息请点击此处

\n

例如，在您的情况下，我们需要将每个brandcolor条目列入安全名单。模式接受正则表达式，所以你的配置可能看起来像

\n

module.exports = {\n    content: [\n        \'./resources/views/**/*.blade.php\',\n        \'./resources/js/**/*.js\',\n    ],\n    safelist: [\n        {\n            pattern: /.-brandcolor-./,\n        }\n    ],\n    theme: {,\n        extend: {\n            colors: {\n                brandcolor: {\n                    50: "#f3d2e4",\n                    100: "#ff53aa",\n                    200: "#ff49a0",\n                    300: "#ff3f96",\n                    400: "#f8358c",\n                    500: "#ee2b82",\n                    600: "#e42178",\n                    700: "#da176e",\n                    800: "#d00d64",\n                    900: "#c6035a",\n                },\n            }\n        },\n    },\n}\n

\n

这样您可以确保其中包含的每个可能的类都-brandcolor-不会被清除。您可以指定更好 - 如果您确定只需要背景和文本颜色，正则表达式可能就像

\n

module.exports = {\n    content: [\n        \'./resources/views/**/*.blade.php\',\n        \'./resources/js/**/*.js\',\n    ],\n    safelist: [\n        {\n            pattern: /(bg|text)-(brandcolor|blue)-./,\n        }\n        // OR multiple entries - same as above\n        {\n            pattern: /(bg|text)-blue-./,\n        },\n        {\n            pattern: /(bg|text)-brandcolor-./,\n        }\n    ],\n    // theme config the same... \n}\n

\n

你可以在你的blade文件中检查它

\n

@foreach ([50, 100, 300, 800] as $brand)\n  <div class="bg-brandcolor-{{ $brand }}">\n   {{ $brand }}\n  </div>\n@endforeach\n

\n

另一种方法 - 创建任何文件（例如，safelist.txt），在其中写入您不想清除的任何类并将其包含在content部分中。这样你就有了更多的控制权，但每个类都应该按原样包含在内 - 而不是正则表达式（在引擎盖下它会将类读取为字符串）

\n

\n

Tailwind 扫描源代码中类的方式故意非常简单 \xe2\x80\x94 我们不\xe2\x80\x99t 实际上以它\xe2\x80\x99 编写的语言解析或执行任何代码，我们只是使用正则表达式提取可能是类名的每个字符串 -链接

\n

\n

module.exports = {\n    content: [\n        \'./resources/views/**/*.blade.php\',\n        \'./resources/js/**/*.js\',\n        \'./safelist.txt\',\n    ],\n    // theme config the same... \n}\n

\n

最后，如果你不关心重复的样式和优化，你可以使用CDN

\n

作为示例 - 在标签中添加这些行，您将看到品牌颜色将在循环head内生成@foreach

\n

<script src="https://cdn.tailwindcss.com"></script>\n    <script>\n        tailwind.config = {\n            theme: {\n                colors: {\n                    brandcolor: {\n                        50: "#f3d2e4",\n                        100: "#ff53aa",\n                        200: "#ff49a0",\n                        300: "#ff3f96",\n                        400: "#f8358c",\n                        500: "#ee2b82",\n                        600: "#e42178",\n                        700: "#da176e",\n                        800: "#d00d64",\n                        900: "#c6035a",\n                    },\n                }\n            }\n        }\n    </script>\n

\n

PS在 3.0 版本之前，有一个选项可以禁用清除purge.enabled = false，但随着 Tailwind 不再使用 PurgeCSS，这不再是一个选项。如果我错了请纠正我

\n

编辑：对于 Tailwind v3+，您可以完全“禁用清除”

\n

module.exports = {\n    content: [\n        \'./resources/views/**/*.blade.php\',\n        \'./resources/js/**/*.js\',\n    ],\n    safelist: [\n        {\n            pattern: /.-brandcolor-./,\n        }\n    ],\n    theme: {,\n        extend: {\n            colors: {\n                brandcolor: {\n                    50: "#f3d2e4",\n                    100: "#ff53aa",\n                    200: "#ff49a0",\n                    300: "#ff3f96",\n                    400: "#f8358c",\n                    500: "#ee2b82",\n                    600: "#e42178",\n                    700: "#da176e",\n                    800: "#d00d64",\n                    900: "#c6035a",\n                },\n            }\n        },\n    },\n}\n

\n