5 ms·
Show HN: Tailwind Nested VSCode Extension
After playing around with Tailwind CSS - I can definitely say that the idea behind is really cool. However, I was really annoyed by editing big amount of hover:, focus: and other styles because of the duplication. Due to this, I decided to build an extension for VSCode that allows editing classes like there's a nesting applied.
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.
- khalidx 2y agoThis 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.
- rpeshkov 2y agoThank 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.
- ska-dev 2y ago> 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/ https://sinukoduleheabi.ee/docs/ska-blocks/selectors/ [2] https://pastebin.com/raw/Nk3xBHfw https://pastebin.com/raw/Nk3xBHfw [3] https://pastebin.com/raw/bKLdTYjD https://pastebin.com/raw/bKLdTYjD (Edit: pastebin removed it for some reason)
- rpeshkov 2y agoWow, 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 [--variations-gap: theme(spacing[2])] - Arbitrary variants are split incorrectly as well [&>h2: first-child]:
- huodon 2y agouse pandacss https://panda-css.com/ https://panda-css.com/
- rpeshkov 2y agoWell, that's completely different beast...
- gnomodromo 2y agoThis 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.