CODEWITHSUNDEEP
visual-studio-codehandlebars.jstailwind-cssinline-scripting
Nikolai Lehbrink
Nikolai Lehbrink

Reputation: 344

Tailwind CSS IntelliSense in Visual Studio Code does not provide suggestions in an inline script?

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.

Upvotes: 0

Views: 2201

Answers (2)

Nikolai Lehbrink
Nikolai Lehbrink

Reputation: 344

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)

Upvotes: 0

Ricardo Silva
Ricardo Silva

Reputation: 1493

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"]
}

Upvotes: 0

Related Questions