Show HN: Tailwind Nested VSCode Extension(marketplace.visualstudio.com)
marketplace.visualstudio.com
Show HN: Tailwind Nested VSCode Extension
https://marketplace.visualstudio.com/items?itemName=RomanPeshkov.tailwind-nested
7 comments
> I was really annoyed by editing big amount of hover:, focus: and other styles because of the duplication
I share that sentiment. I even "invented" something called "selectors" [1] which is a UI to handle all the Tailwind variants.
I popped this monstrosity of a Tailwind class in and your extension worked wonderfully in creating a tree of it: [2]
How ever when I collapsed it back to a single line something went wrong and it increased the length of the classes by ~15x creating this: [3]
[1] https://sinukoduleheabi.ee/docs/ska-blocks/selectors/
[2] https://pastebin.com/raw/Nk3xBHfw
[3] https://pastebin.com/raw/bKLdTYjD (Edit: pastebin removed it for some reason)
I share that sentiment. I even "invented" something called "selectors" [1] which is a UI to handle all the Tailwind variants.
I popped this monstrosity of a Tailwind class in and your extension worked wonderfully in creating a tree of it: [2]
How ever when I collapsed it back to a single line something went wrong and it increased the length of the classes by ~15x creating this: [3]
[1] https://sinukoduleheabi.ee/docs/ska-blocks/selectors/
[2] https://pastebin.com/raw/Nk3xBHfw
[3] https://pastebin.com/raw/bKLdTYjD (Edit: pastebin removed it for some reason)
Wow, this is huge! :)
I tried it to see what's going on. There are 2 issues that I need to fix:
- Variables. It splits incorrectly
I tried it to see what's going on. There are 2 issues that I need to fix:
- Variables. It splits incorrectly
[--variations-gap:
theme(spacing[2])]
[&>h2:
first-child]:This looks really useful. The single line of class properties is a struggle. Additionally I'm using a plugin that hides the class property all together, until I'm clicking on it or toggle it.
This a great idea.
You could also add a collapse toggle ">" to the classname line that will open the focus view (instead of the keyboard toggle). I think the VSCode API supports it.
You could also add a collapse toggle ">" to the classname line that will open the focus view (instead of the keyboard toggle). I think the VSCode API supports it.
Thank you for this idea! VSCode API definitely allows to do this, however here I will need more sophisticated algorithm to understand where to show it and where not. Current implementation can expand/collapse literally any string, so kind of implicitly it supports even the cases when you use classnames or similar libraries.
Pretty much it works in way that you can expand classes into multiple lines with simple hierarchy, do changes and then return it back to a single line.
The extension is in really early stage and definitely there will be a ton of issues at the moment.