没问题，这确实可以通过Tailwind的配置文件轻松实现，我给你两种方案，你可以根据需求选择：

方案1：添加no-display作为hidden的别名（保留原hidden类） #

如果你想同时保留hidden和新增no-display类来实现相同的display:none效果，只需要在tailwind.config.js中扩展工具类：

1. 打开项目根目录下的tailwind.config.js（如果没有，先运行npx tailwindcss init生成）
2. 在theme.extend中添加自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"], // 根据你的项目文件类型调整路径
  theme: {
    extend: {
      utilities: {
        "no-display": {
          display: "none",
        },
      },
    },
  },
  plugins: [],
}

保存配置后重新编译Tailwind，之后你就可以在HTML中使用class="no-display"来实现display:none的样式了，原有的hidden类依然可以正常使用。

方案2：完全替换hidden为no-display（禁用原hidden类） #

如果你想彻底用no-display替代hidden，不再保留原hidden类，可以这样配置：

1. 同样打开tailwind.config.js
2. 先通过corePlugins禁用核心的hidden类，再添加自定义的no-display：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  corePlugins: {
    hidden: false, // 关闭Tailwind自带的hidden类
  },
  theme: {
    extend: {
      utilities: {
        "no-display": {
          display: "none",
        },
      },
    },
  },
  plugins: [],
}

这样配置后，只有no-display能实现display:none效果，原hidden类会被移除，不会生成对应的CSS样式。

注意事项 #

• 确保你的content配置包含了所有使用Tailwind类的文件路径，否则自定义类可能不会被编译到最终CSS中
• 修改配置后需要重启你的开发服务器或者重新编译Tailwind样式，才能让新类生效

内容的提问来源于stack exchange，提问作者rgc998