Tailwind CSS autocomplete inside Twig variables

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.