(Docs) Enhancing VSCode Experience with Tailwind and Shadcn-UI Components

[muhammedogz]

Edit: I saw CVA gives the solution when first introducing this on download. But it could be still a thing to write a docs about this in shadcn ui docs.

Introduction

When working with Shadcn-UI components in Visual Studio Code, you might have noticed that the usual Tailwind CSS IntelliSense doesn't function when hovering over classes from imported components. This happens due to the specific format in which classes are mentioned within these components. However, with a little tweak, we can enhance our VSCode experience to provide better feedback and development speed.

Problem

By default, the Tailwind IntelliSense extension in VSCode is activated when we type out classes in the format: classname="..". However, when importing and working with Shadcn-UI components, this doesn't seem to be the case, hence missing out on the benefits of live feedback and class suggestions.

Solution

I have found a solution to this issue that requires a small adjustment in the VSCode settings.

When you include the following configuration in your .settings.json file in VSCode, the Tailwind IntelliSense starts recognizing and suggesting classes for Shadcn-UI components:

"tailwindCSS.experimental.classRegex": [
    ["Variants \\=([^;]*);", "\"([^\"]*)\""]
  ]

As you can see, when I hover, it is showing the css and if I type something, it will show me the tailwind classess too like that.

Contribution

Given the opinionated nature of Shadcn-UI, I believe that including such editor-specific tips and settings would greatly benefit developers. It ensures a seamless integration and enhances productivity. since shadcn-ui is very opiniated, I think giving some tips about editors and settings would be nice though.

I considered proposing this directly via a pull request but felt it would be best first to discuss how it could be integrated into the documentation.

Ref for the solution:

https://stackoverflow.com/a/73655079/11970836 https://www.jussivirtanen.fi/writing/using-tailwind-intellisense-within-strings

[joakim-roos]

Great idea. Something that could be really helpful! Albeit your solution didn't work for me, I did find this solution as well which works great for me: https://cva.style/docs/getting-started/installation

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
  ]
}

[muhammedogz]

Great idea. Something that could be really helpful! Albeit your solution didn't work for me, I did find this solution as well which works great for me: cva.style/docs/getting-started/installation

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
  ]
}

Yes cvas solution is way better since shadcnui using cva as well when first introducing the component. I noticed this solution after opening this issue too.

It would be nice to suggest people this in docs as well.

What dou you think? @shadcn

[chaukhoa97]

This is huge boost in DX and should be implemented by default

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.