在Pug模板中使用Tailwind CSS带方括号的类名方法

直接兼容方括号语法的方法 #

Pug的类名点语法（比如.h-[127px]）确实会因为方括号的特殊解析规则报错，但你可以用引号包裹完整的类属性来避开这个问题：

// 正确写法：通过class属性定义类名
div(class="h-[127px] w-[300px] bg-[#ff44cc]") 自定义尺寸元素

// 混合普通类与自定义类时，同样放在引号内
div(class="flex h-[127px] justify-center") 混合类示例

这种写法下，Pug会把引号内的内容当作纯字符串处理，完全兼容Tailwind的方括号自定义语法。

推荐的替代方案 #

如果觉得每次写引号麻烦，还有几种更流畅的处理方式：

1. 在Tailwind配置中添加自定义主题值
   把常用的自定义尺寸、颜色等加到tailwind.config.js的theme.extend中，这样就能用普通类名调用：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        'custom-127': '127px',
      },
      colors: {
        'pink-accent': '#ff44cc',
      },
    },
  },
}

之后在Pug里直接使用：

div.h-custom-127.bg-pink-accent 自定义主题元素

这种方式更贴合Tailwind的设计理念，也让代码更整洁易维护。

2. 使用Pug插值语法处理动态自定义值
   如果自定义值是动态生成的（比如来自变量），可以结合插值和引号实现：

- const customHeight = '127px'
div(class=`h-[${customHeight}]`) 动态自定义尺寸元素

3. 封装自定义工具类（应急方案）
   如果只是临时使用某个自定义值，也可以在CSS文件中用@apply封装成工具类：

/* 自定义工具类 */
.custom-height {
  @apply h-[127px];
}

然后在Pug里直接调用：

div.custom-height 工具类元素

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