skip to Main Content

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.

2

Answers


  1. Chosen as BEST ANSWER

    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)

  2. 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"]
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search