使用函数生成 TailwindCSS 安全列表？答案

【问题标题】：Generating TailwindCSS safelist with function?使用函数生成 TailwindCSS 安全列表？
【发布时间】：2022-12-30 11:12:17
【问题描述】：

我正在尝试使用一个函数为 TailWindCSS 3.0.23 生成一个安全列表，这样我就可以覆盖一些范围。

出于某种原因，类似乎仍然被清除。

module.exports = {
  content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],

  safelist: function(){
    let list = [
      'user-administrator:not(.wp-admin)',
    ];

    for(let i = 0; i <= 100; i += 5 ){
      list[list.length] = 'opacity-' + i;
    }

    return list;
  },

这种事情可能吗？有任何想法吗？

【问题讨论】：

标签： tailwind-css tailwind-3

【解决方案1】：

我最终通过在函数的右括号后添加一对括号来解决这个问题，以便它执行。

module.exports = {
  content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],

  safelist: function(){
    let list = [
      'user-administrator:not(.wp-admin)',
    ];

    for(let i = 0; i <= 100; i += 5 ){
      list[list.length] = 'opacity-' + i;
    }

    return list;
  }(),

【讨论】：

【解决方案2】：

您可以在javascript 中输入以下代码。

const tailwindColors = require("./node_modules/tailwindcss/colors")
const colorSafeList = []

// Skip these to avoid a load of deprecated warnings when tailwind starts up
const deprecated = ["lightBlue", "warmGray", "trueGray", "coolGray", "blueGray"]

for (const colorName in tailwindColors) {
  if (deprecated.includes(colorName)) {
    continue
  }

  // Define all of your desired shades
  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]

  const pallette = tailwindColors[colorName]

  if (typeof pallette === "object") {
    shades.forEach((shade) => {
      if (shade in pallette) {
       // colorSafeList.push(`text-${colorName}-${shade}`)  <-- You can add different colored text as well 
        colorSafeList.push(`bg-${colorName}-${shade}`)
      }
    })
  }
}

// tailwind.config.js
module.exports = {
  safelist: colorSafeList,                      // <-- add the safelist here
  content: ["{pages,app}/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: tailwindColors,
    },
  },
  plugins: [],
}

【讨论】：