Pro Tailwind

02. Tailwind Intellisense support

🐇 TL;DR

  • When extracting classes inside a variable, we lose the Tailwind Intellisense goodness 😭
  • Let’s expand the surface area of where Tailwind Intellisense should help!

⬇️ Skip to the challenge

🐢 Background

One of the most powerful tool of the Tailwind CSS ecosystem is the vscode Tailwind Intellisense extension, which provides class autocomplete suggestion, linting, CSS output hover preview… and of course, beautiful color swatches whenever using color utilities.

By default, the extention will only work its magic wihin a class or className attribute.

Since we’re storing a list of Tailwind classes inside a baseClasses variable, we’re not getting any help from the Tailwind Intellisense extension.

Bummer!

Well, we can change that. Let’s explore this together quickly!

🏆 Your challenge 🏆

In the Gitpod workspace below:

  1. Open the workspace settings, and search for Tailwind

  2. Add an item to the Class Attributes list to expand the area where Tailwind Intellisense needs to help.

  3. Explore the tailwindCSS.experimental.classRegex option.

✌️ Let’s do this one together!

Open in Gitpod →