顺风中断 Pug 文件的类名中的冒号符号

Question

我正在 Vue 中创建一个项目，其中的 HTML 部分是用 pug 编写的。当我添加顺风类时，（例如在本例中我尝试添加类）

.w-16.md:w-32.lg:w-48

因为它是在哈巴狗中，通常类没有冒号，但我正在使用顺风，我试图使其响应不同的屏幕尺寸。我收到以下错误：

Unexpected token `filter` expected `text`, `interpolated-code`, `code`, `:`, `slash`, `newline` or `eos`

有没有一种方法可以让我可以用其他东西替换冒号的所有实例，以便顺风可以读取它并且不会破坏项目？ “将 ':' 替换为 '--' 或类似的内容，以前称为 .lg:w-48 的类现在可以称为 .lg--w-48”

Answer 1

根据文档：

分隔符

separator

选项可让您自定义应使用哪个字符将修饰符（屏幕尺寸、

hover

、

focus

等）与实用程序名称（

text-center

、

items-end

等）分开。

我们默认使用冒号 (

:

)，但如果您使用像 Pug 这样不支持类名中特殊字符的模板语言，则更改此设置可能会很有用。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  separator: '_',
}

因此，如果您希望分隔符为

--

，您可以这样做：

/** @type {import('tailwindcss').Config} */
module.exports = {
  separator: '--',
}