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时，我必须重新编译它。

我必须更改什么才能使用所有可用选项编译 FULL css？所以我也可以做这样的事情：

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

并在我的代码中将颜色设置为变量。而且我知道，不推荐这样做，但是 CSS 对于这个项目来说不必很小。

Answer 1

您可以指定配置文件的 safelist 部分。更多信息 here

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

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

这样您可以确保不会清除所有可能包含 -brandcolor- 的 class。您可以指定得更好 - 如果您确定只需要背景和文本颜色，则正则表达式可能像

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

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

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

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

The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name - link

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

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

举个例子——在 head 标签中添加这些行，你会看到 brandcolors 会在 @foreach loop

中生成

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

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

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

Tailwind fully compile css without stripping unused classes

tailwind-css

tailwind-ui

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

Tailwind fully compile css without stripping unused classes

tailwind-css

tailwind-ui

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