顺风CSS自动完成在小树枝变量

Question

我使用TWIG文件的TailwindCSS。purgecss在CSS文件和"normal"标记就像

<div class="font-bold text-blue"></div>

但是我们主要开发Drupal TWIG模板和很多TWIG文件将类设置为属性数组。风箱坏了

attributes.addClass(['font-bold', 'bg-blue']);

或

{% set classes = ['font-bold', color == 'blue' ? 'bg-blue'] %}

我的purgecss配置:

gulp.task ("styles",Gulp.series ("sass"， function () {Const postcssimport = require("postcss-import");

return gulp
.src("src/styles.css")
.pipe(sass().on("error", sass.logError))
.pipe(
postcss([
postcssimport(),
tailwindcss("./tailwind.config.js"),
autoprefixer,
])
)
.pipe(
purgecss({
mode: "layers",
content: ["templates/**/*.twig", "src/scss/**/*.scss"],
defaultExtractor: (content) => content.match(/[w-/:]+(?<!:)/g) || [],
})
)
.pipe(gulp.dest("./css"));

})

);你对此有什么想法吗?谢谢你。

Answer 1

用于VS code的TailwindCSS Intellisense插件有一个实验性设置，可以让你设置自定义的regex表达式来触发自动完成。插件的作者在这里宣布:https://github.com/tailwindlabs/tailwindcss-intellisense/issues/129 issuecomment - 735915659

我使用这两个正则表达式分别激活{% set classes = [] }和<element{{ attributes.addClass() }}>的自动完成:

"tailwindCSS.experimental.classRegex": [
["classes =.+\[([^\]]*)\]","'([^']*)'"],
["addClass\(([^\)]*)\)","'([^']*)'"]
]

进入主设置。