Twig 变量中的 Tailwind CSS 自动完成功能答案

【问题标题】：Tailwind CSS autocomplete inside Twig variablesTwig 变量中的 Tailwind CSS 自动完成功能
【发布时间】：2021-12-11 10:54:12
【问题描述】：

我正在将 TailwindCSS 与 TWIG 文件一起使用。 purgecss 在 CSS 文件中以及在“普通”标记中都可以正常工作，例如

<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( “风格”， 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"));

}) );

您对此有任何想法吗？谢谢。

【问题讨论】：

你没有列出你遇到这个问题的编辑器
我正在使用 Visual Code。
猜猜全名是visual studio code？span>

标签： visual-studio-code drupal twig tailwind-css

【解决方案1】：

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

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

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

这将进入 VS Code 的主 settings.json 文件。

【讨论】：