Select multiple classes and show combined output...

[willdavidow]

I know there are some Neovim plugins out there that do this sort of thing, but it would be cool to have a feature (or maybe it's already possible somehow?) where you have string of tailwind classes, e.g.:

flex h-[84px] flex-row items-start justify-start gap-x-12

and instead of hovering over each individual class to see its value, if you could select n classes and see the combined output of those classes.

Current functionality (using above class string as an example)

hover over flex and see:

.flex {
  display: flex;
}

hover over h-[84px] and see:

.h-\[84px\] {
  height: 84px;
}

Proposed Functionality

It would be very useful to be able to visually select flex h-[84px] and see:

*combined* {
  display: flex;
  height: 84px;
}

Or select the entire class string and see:

*combined* {
  display: flex;
  height: 84px;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 3rem; /* 48px */
}

[willdavidow]

Oh, it looks like someone suggested something similar to this under issues #27... felt like a better spot to put it here under discussions so I didn't even check there 👀

[luckasRanarison]

Someone suggested that when I first released the plugin, I forgot about it but it should be possible now that there's the NodeJS remote plugin. #27 is definetely not related by the way.

There's already a vimL function called TailwindExpandUtilities that uses the tailwindcss library and returns the CSS output, and can be used like this:

vim.fn.TailwindExpandUtilities({ "flex", "flex-col" })
-- .flex {                                                                                                                                                
--   display: flex                                                                                                                                      
-- }                                                                                                                                                      
-- .flex-col {                                                                                                                                            
--   flex-direction: column                                                                                                                             
-- } 

The only limitation is that it can only expand utility classes from the configuration file and built-ins, but doesn't take components or the ones defined in CSS. (Could change with tailwindcss v4).

[luckasRanarison]

I've created an issue for this #48. I'm quite busy for the moment, so I'll pick it next week if someone doesn't decide to try it. I think it should be straightforward to implement :)

[willdavidow]

Awesome - thanks for creating an enhancement issue for this... If I have time I'll try my hand at implementing this, but i'm a little short on time over the next few weeks so you might beat me to the punch if you're picking it up next week.