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
yeah you need to add a .vscode file, and then add a settings.json.
Then you need this:
then you should see stuff like the colors and other stuff from tailwind vscode extension and autocomplete etc,
Thx
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
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 thoughHi, is the CVA regex work for you always? Like when i'm using it with big component states it lose autocomplete, really sucks.
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
Erm the regex described on the cva docs works fine for me, but I havent used it in anything complicated
I can’t even understand what the regex means 😅
I’ll have to try it again
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.
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.
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?
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.