tw_screen_size - A tiny, one-component package for LiveView x Tailwind to elevate your design iteration experience

Your Libraries & OS Mentoring Libraries
, , , , ,
1

tw_screen_size_tweet_img
tw_screen_size_tweet_img1200×887 44.9 KB

I came across a really handy React component on Twitter the other day, and thought it made for a fun excuse to write a tiny LiveView package. :framed_picture:

GitHub - GitHub - tylerbarker/tw_screen_size: A tiny LiveView widget showing the current screen dimensions and Tailwind breakpoint 🖼️
Hex - tw_screen_size | Hex
HexDocs - TwScreenSize — tw_screen_size v1.0.0

3 Likes
2

Oh nice! At first I just thought this was showing the viewport res and I was like, “So?” then I saw the “MD” and I was like, “whoa!” This is indeed really handy, thanks!

1 Like
3

haha thanks mate! I had the same thought when I saw it on Twitter. It never really occurred to me how I’d been working virtually blind of the breakpoints until then :melting_face:

2 Likes
4

A little demo GIF for clarity: https://pub-0bd602de4141434f899c6f284446e48a.r2.dev/tw_screen_size_demo_min.gif

1 Like