在 Pug 和 Tailwind CSS 的类名中使用方括号

Question

我正在尝试在一个项目中同时使用 Pug 和 Tailwind CSS。我在 Pug 模板中尝试使用 Tailwind 的自定义值语法（使用方括号）时遇到了问题。

我知道 h-[127px] 是用于设置自定义高度的有效 Tailwind 类。不过，Pug 似乎不喜欢方括号。

在使用 Tailwind CSS 时，有没有办法在 Pug 中集成方括号语法？ 如果没有，在 Pug 模板中使用 Tailwind 的自定义值的建议解决方法是什么？ 感谢您的帮助！

Answer 1

方括号（甚至转义）无法使用 Pug 的简写类语法：

// won't work
img.avatar.h-[127px](src='foobar.png')
 
// also won't work
img.avatar.h-\[127px\](src='foobar.png') 

但是您可以将方括号与常规属性语法一起使用：

// will work
img(class='avatar h-[127px]', src='foobar.png') 

另请注意，您可以将类简写与常规类属性混合使用，这样您就可以继续对所有不带括号的类使用简写，并且仅对有问题的类使用简写：

// will work, and is equivalent to the previous example
img.avatar(class='h-[127px]', src='foobar.png')