0

I am trying to get the TailwindCSS IntelliSense working inside an inline script. I am using handlebars in a simple One-Pager, however the autocompletion doesn't work in side the script tag.

<div id="template" class="w-4/5 swiper-wrapper lg:w-2/3">
  <script id="output" type="text/x-handlebars-template">
    {{#each images}}
      <div class="swiper-slide">
        <div class="swiper-carousel-animate-opacity">
          <img class="bg-red" src="{{url}}" alt="{{alt}}" />
        </div>
      </div>
    {{/each}}
  </script>
</div>

I tried all the suggestions in the following thread (Tailwind CSS IntelliSense does not provide suggestions in a ReactJS project?) but it doesn't work for the script. Would be nice, if someone could help.

Nikolai Lehbrink
  • 25
  • 4

2 Answers2

0

If you handlebars template is a js variable, you need to prefix or suffix with something like "Styles"/"Classes" for example. and add the following to you vscode setting.json.

// settings.json within VS Code
{
  // Add ".*Styles" (or whatever matches your naming scheme)
  "tailwindCSS.classAttributes": ["class", "className", "ngClass", ".*Styles", ".*Classes"]
}
Ricardo Silva
  • 1,221
  • 9
  • 19
  • Hi, if you take a look in my code, I use standard html code inside the script. Default value for Class Attributes is "class" which is the one I use but it still not work. – Nikolai Lehbrink Mar 03 '23 at 09:00
  • Is it inside a template file or a string in a javascript file? Because if it is a string the above still applies, you need to change the regex to match. If is a template, you need to add the template file extension to be read from the extension. https://github.com/tailwindlabs/tailwindcss-intellisense/issues/152 – Ricardo Silva Mar 03 '23 at 15:00
0

The issue is now fixed.

https://github.com/tailwindlabs/tailwindcss-intellisense/issues/722

0.9.8

  • Fix invalidTailwindDirective linting with CRLF file endings (#723)
  • Add support for Handlebars template scripts (<script type="text/x-handlebars-template">) (#726)
  • Improve JavaScript comment detection (#727)
  • Add modifier completions for @apply and classRegex setting (#732)
  • Add bundled version of @tailwindcss/container-queries (#733)
  • Support InitializeParams.rootUri (#725)
  • Add htmldjango to default supported languages (#721)
Nikolai Lehbrink
  • 25
  • 4