UI devtools

visual devtools for tailwindcss · maintained as sponsorware by @siddharthkp:

[UI devtools @uidevtools]

it's time

[siddharth ☻ @siddharthkp]

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

https://t.co/ijPgUdSDxN

✌️

[UI devtools @uidevtools]

@Perrun32 monthly :)

[siddharth ☻ @siddharthkp]

📸 @uidevtools

new ux idea: resize margin with mouse?

[UI devtools @uidevtools]

✌️🚀 0.9.1

[siddharth ☻ @siddharthkp]

📸 @uidevtools

identify svg elements and show additional properties - stroke + fill

setting stroke color as currentColor means it will take the parent's color property :)

[siddharth ☻ @siddharthkp]

📸 @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

[siddharth ☻ @siddharthkp]

📸 @uidevtools

added some good old text editing, tap T on an element with text

.

[siddharth ☻ @siddharthkp]

📸 @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 😇)

[siddharth ☻ @siddharthkp]

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

https://t.co/INkaenVAr7

[siddharth ☻ @siddharthkp]

📸 @uidevtools

holy shit, this actually worked???

convert conditional expression to a template expression to make room for the "always" class

[siddharth ☻ @siddharthkp]

📸 @uidevtools

first attempt at conditional expressions, opened up pandora's box

[siddharth ☻ @siddharthkp]

👀 @uidevtools

accidentally made the transforms super super fast! should change the unit to milliseconds now!

before and after:

[siddharth ☻ @siddharthkp]

📸 @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

[siddharth ☻ @siddharthkp]

📸 @uidevtools

warning for inaccessible text contrast + hints for colors with enough contrast AA/AAA

[siddharth ☻ @siddharthkp]

📸 @uidevtools

showing color number on hover because I like to know which value i'm picking

[UI devtools @uidevtools]

@threepointone @mikoz93 @tailwindcss @adamwathan 🙌

[UI devtools @uidevtools]

looking for help 🙇‍♀️

[siddharth ☻ @siddharthkp]

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 ⬇️

[UI devtools @uidevtools]

💙🙌

[UI devtools @uidevtools]

👀

[UI devtools @uidevtools]

🚀 release update: ui-devtools/[email protected]

this is works on my machine release for @vuejs integration 🧪😇

if you're a sponsor, you can try it out now :)

[UI devtools @uidevtools]

@edwinencomienda @siddharthkp @znck0 @vuejs https://t.co/nAKrIEnJZA