Tailwind CSS autocomplete inside Twig variables - visual-studio-code

Question

I am using TailwindCSS with TWIG files. The purgecss works fine inside CSS files and also inside "normal" markup like
<div class="font-bold text-blue"></div>
But we are developing mostly Drupal TWIG templates and a lot of our TWIG files setting classes to an attributes array. And the bellow doesn't work.
attributes.addClass(['font-bold', 'bg-blue']);
or
{% set classes = ['font-bold', color == 'blue' ? 'bg-blue'] %}
This is my purgecss configuration:
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"));
})
);
Do you have any idea about this?
Thank you.

Answer 1

The TailwindCSS Intellisense plugin for VS code has an experimental setting that lets you set custom regex expressions that fire autocomplete. It's announced by the plugin's author here:
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/129#issuecomment-735915659
I use these 2 regular expressions to activate autocomplete for {% set classes = [] } and <element{{ attributes.addClass() }}> respectively:
"tailwindCSS.experimental.classRegex": [
["classes =.+\\[([^\\]]*)\\]","'([^']*)'"],
["addClass\\(([^\\)]*)\\)","'([^']*)'"]
]
This goes into the main settings.json file for VS Code.