Allow autocomplete inside Twig files for Drupal

[yannickoo]

What version of VS Code are you using?

1.96.2

What version of Tailwind CSS IntelliSense are you using?

0.12.17

What version of Tailwind CSS are you using?

3.0.23

What package manager are you using?

npm

What operating system are you using?

macOS

Describe your issue

When using Twig in Drupal there is a nice way to define attributes, also setting classes – https://www.drupal.org/docs/8/theming-drupal-8/using-attributes-in-templates

There are several ways possible:

One class

<div{{ attributes.addClass('another-class') }}>

Multiple classes

Separated by comma

<div{{ attributes.addClass('another-class', 'another-one', 'foo') }}>

Separated by space

<div{{ attributes.addClass('another-class another-one foo') }}>

Now my question is how I could adjust the tailwindCSS.experimental.classRegex setting to have support for autocomplete.

[Eptagone]

Hi @yannickoo, for complex cases like yours, use the classRegex option like this:

// .vscode/settings.json
{
    "tailwindCSS.experimental.classRegex": [
        [
            "attributes\\.addClass\\(([\\s\\S]*?)\\)",
            "[\"']([^\"']*)[\"']"
        ]
    ],
}

Reload VS Code or reload the extension after adding the new settings.

[yannickoo]

Hey @Eptagone! Thank you very much for this one, it works like a charm <3 I will spread this to the Drupal community so that many frontenders won't need to waste their time because autocomplete doesn't work as expected 💪