visual devtools for tailwindcss · maintained as sponsorware by @siddharthkp: github.com/sponsors/siddhart…

localhost
it's time
wip → ready Super freaking excited to share the browser devtools built for @tailwindcss 01 attach on top of your existing workflow 02 understands your theme 03 instant visual feedback 04 saves changes back to your code ui-devtools.com ✌️
15
@uidevtools Have I select a monthly tier to use it? Or one time payment could work?
1
50
UI devtools retweeted
📸 @uidevtools new ux idea: resize margin with mouse?

ALT you can visually drag the margin down to increase it

1
4
44
✌️🚀 0.9.1

ALT release process running tests, building files and releasing

3
2
48
UI devtools retweeted
📸 @uidevtools identify svg elements and show additional properties - stroke + fill setting stroke color as currentColor means it will take the parent's color property :)

ALT Stroke and Fill shown for svg elements. setting stroke color as currentColor means it will take the parent's color property

1
29
UI devtools retweeted
📸 @uidevtools sometimes you start with a div/span and then change your mind, especially for proper semantics 😇 ui-devtools supports changing classnames, inner text and now tagName
4
2
37
UI devtools retweeted
📸 @uidevtools added some good old text editing, tap T on an element with text .

ALT tapping T makes the selected element's text editable

3
2
35
UI devtools retweeted
📸 @uidevtools tiny improvement, added a way to toggle border on each side because sometimes you only need border-bottom (the instant code change is very satisfying 😇)

ALT video of me toggling 3 out of 4 borders off, so that we only have border bottom

2
1
26
UI devtools retweeted
pulled a useful snippet out from @uidevtools to open source it → Click a component while holding Alt/option to open it's source code in @code github.com/siddharthkp/babel…

ALT clicking a component while holding Alt opens it's source code in VSCode

24
58
366
UI devtools retweeted
📸 @uidevtools holy shit, this actually worked??? convert conditional expression to a template expression to make room for the "always" class

ALT when the original conditional expression can't have a class which is always present, the expression is converted to a template expression first.

1
1
32
UI devtools retweeted
📸 @uidevtools first attempt at conditional expressions, opened up pandora's box

ALT in the sidebar, you can select if the styles should go in the truthy bits or falsy bits of a conditional expression

4
1
43
UI devtools retweeted
👀 @uidevtools accidentally made the transforms super super fast! should change the unit to milliseconds now! before and after:
10
1
43
UI devtools retweeted
📸 @uidevtools completely changed my mind about showing scale and margins. when you're resizing, you want the tool to get out of your way so you can see how Your ui looks

ALT margin and highlights fade away when resizing margins

3
1
22
UI devtools retweeted
📸 @uidevtools warning for inaccessible text contrast + hints for colors with enough contrast AA/AAA

ALT warning that says "text does not have enough contrast" and showing wcag contrast labels like AA and AAA in color picker

3
5
70
UI devtools retweeted
📸 @uidevtools showing color number on hover because I like to know which value i'm picking

ALT in color picker, showing color name on swatch hover

2
1
52
revisiting spec.fm/podcasts/reactpodcas… in light of utopia.app and the new next.js release and and damn I was pretty close
5
4
41
looking for help 🙇‍♀️
help me out, if i were to hire someone to work with me on my side project @uidevtools, how would I go about finding that person in my network? 🕔 20 hours/month - they decide when and how they distribute that 💵 at least 2 * what they make for 20 hours with employer details ⬇️
1
4
👀
2
1
57
🚀 release update: ui-devtools/tailwind-vue-experimental@0.0.2 this is works on my machine release for @vuejs integration 🧪😇 if you're a sponsor, you can try it out now :)
1
3
26
📸 @uidevtools made a tiny breakthrough with @vuejs, vue support coming soon 🎉

ALT script that changes a classname for vue

2
5
70
what’s the terminal?
1
1