TailwindCSS and CVA autocomplete

Hi guys, i'm using CVA with TailwindCSS for building complex state components, but a particular thing bothers me, is that there is not autocomplete of TailwindCSS clases in CVA. I'm new to Tailwind (i don't like it, but is fine to use it), so maybe some of you guys know a trick for this?
13 Replies
awexis
awexis2y ago
yeah you need to add a .vscode file, and then add a settings.json. Then you need this:
{
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
],
}
{
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
],
}
awexis
awexis2y ago
then you should see stuff like the colors and other stuff from tailwind vscode extension and autocomplete etc,
oljimenez
oljimenez2y ago
Thx
Jim
Jim2y ago
Hey! I was wondering if you set anything up to prevent cssConflict warnings showing up in your linter? Here's what it looks like for me o_o
Jim
Jim2y ago
Ok I was trying to use multiple regex for tailwindCSS.experimental.classRegex which looks like it was messing things up (i was using my own custom regex for highlighting TW strings). Looking good now though
oljimenez
oljimenez2y ago
Hi, is the CVA regex work for you always? Like when i'm using it with big component states it lose autocomplete, really sucks.
Perfect
Perfect2y ago
That regex fix didn’t work well for me either, I wasn’t getting any autocomplete @oljimenez I’ve been looking for a way to enable this too, so I can get prettier reordering and autocomplete But haven’t found any way
Jim
Jim2y ago
Erm the regex described on the cva docs works fine for me, but I havent used it in anything complicated
Perfect
Perfect2y ago
I can’t even understand what the regex means 😅 I’ll have to try it again
oljimenez
oljimenez2y ago
Yeah, it works, but only in simple things. I think that when line breaks or you add complex css types like [] it start to break. TailwindCSS is hard men, the amount of config, plugins, libraries and stuff is needed to work good for complex stuff it scares me.
oljimenez
oljimenez2y ago
Example this button created by shadcn it have broken intellisense in CVA https://ui.shadcn.com/docs/primitives/button
Button
Displays a button or a component that looks like a button.
Jim
Jim2y ago
Actually the example I pasted above is based on the shadcn button component! Works ok on this fresh project I made, maybe you are seeing issues integrating it into another project?
oljimenez
oljimenez2y ago
Nop, my new proyect ( Nextjs 13 app router) just breaks TailwindCSS Intellisense with this regex. Maybe have to be that my editor breaks the line in 140 ch. But either way this way just feels wrong in complex components.
Want results from more Discord servers?
Add your server