uidevtools's profile picture. visual devtools for tailwindcss · maintained as sponsorware by @siddharthkp: http://github.com/sponsors/siddharthkp

UI devtools

@uidevtools

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

置頂

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



UI devtools 已轉發

📸 @uidevtools new ux idea: resize margin with mouse?


✌️🚀 0.9.1


UI devtools 已轉發

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


UI devtools 已轉發

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


UI devtools 已轉發

📸 @uidevtools added some good old text editing, tap T on an element with text .


UI devtools 已轉發

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


UI devtools 已轉發

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/ba…


UI devtools 已轉發

📸 @uidevtools holy shit, this actually worked??? convert conditional expression to a template expression to make room for the "always" class


UI devtools 已轉發

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


UI devtools 已轉發

👀 @uidevtools accidentally made the transforms super super fast! should change the unit to milliseconds now! before and after:


UI devtools 已轉發

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


UI devtools 已轉發

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


UI devtools 已轉發

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


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



🚀 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 :)

uidevtools's tweet image. 🚀 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 :)

UI devtools 已轉發

📸 @uidevtools made a tiny breakthrough with @vuejs, vue support coming soon 🎉


UI devtools 已轉發

I'm surprised how well this worked out! animating svgs with raw tailwind

It's been a while, going to do some live coding/stream today at 4:30pm UTC + 1 trying something different, will build this interaction concept from @.Volorf with @tailwindcss and @uidevtools not sure how well it's going to translate, we'll see 😇 📺 youtube.com/sid-studio/live



UI devtools 已轉發

📷 @uidevtools Exploring keyboard shortcuts to improve the workflow a bit more. Shift > mb > down down down > Enter not sold on the ux yet. experiment shipped to sponsors.


Loading...

Something went wrong.


Something went wrong.