Loading video...

Video Failed to Load

Go Home

🔑 Tip from my <Slider> lesson: Add the `touch-none` and `select-none` Tailwind utilities to avoid unwanted scrolling + selection for custom components on mobile Safari!

samselikoff's profile picture

Sam Selikoff

32,527 subscribers

21,342 views • 2 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

4 Comments

John Barker's profile picture
John Barker2 years ago

Great tip! Also, what is driving the re-ordering of the class name upon save?

Sam Selikoff's profile picture
Sam Selikoff2 years ago

This guy

Laura Beatris's profile picture
Laura Beatris2 years ago

Awesome! What's the extension that you use to get the CSS rules used by a Tailwind class on hover?

Srdjan Milicevic's profile picture
Srdjan Milicevic2 years ago

Would putting select-none on main apply to all the children inside main?

Related Videos

NVIDIA GeForce Now is now available for Apple Vision Pro in Safari, and it’s pretty great! Helpful tip: When prompted during setup, select “Add to Web Apps” in Safari Actions instead of “Add to Home Screen,” and you’ll be good to go!
0:24

NVIDIA GeForce Now is now available for Apple Vision Pro in Safari, and it’s pretty great! Helpful tip: When prompted during setup, select “Add to Web Apps” in Safari Actions instead of “Add to Home Screen,” and you’ll be good to go!

Justin Ryan ᯅ

33,605 views • 1 year ago

custom <select> with CSS 🧑‍🍳 select { &, &::picker(select) { appearance: base-select; } }
0:27

custom <select> with CSS 🧑‍🍳 select { &, &::picker(select) { appearance: base-select; } }

jhey ʕ•ᴥ•ʔ

214,653 views • 11 months ago

Quick Tip for Dynamic Hornet: Selection Sets Press SHIFT+ALT+W to get a menu of premade sets that automatically select the correct bones. Add your own sets, be lazy with selection and animate however you want! #b3d #blender #Silksong #Hollowknight #hornet
0:49

Quick Tip for Dynamic Hornet: Selection Sets Press SHIFT+ALT+W to get a menu of premade sets that automatically select the correct bones. Add your own sets, be lazy with selection and animate however you want! #b3d #blender #Silksong #Hollowknight #hornet

Krysidian

20,645 views • 2 months ago

on the drive back home from a trip to montreal, got the <think> tags in on my custom extension after doing a lot of </thinking>. now my nvim has a chinese bicycle for the mind
0:38

on the drive back home from a trip to montreal, got the <think> tags in on my custom extension after doing a lot of </thinking>. now my nvim has a chinese bicycle for the mind

kache

16,974 views • 1 year ago

40 countries stood up for women of Afghanistan. None from the region. None from Muslim-majority countries (except Albania and Bosnia).
1:12

40 countries stood up for women of Afghanistan. None from the region. None from Muslim-majority countries (except Albania and Bosnia).

Lotfullah Najafizada

42,739 views • 3 months ago

Quick After Effects Tutorial - Dripping Text Animation - Add CC Smear on a text layer -> Position the smear on each letter and animate the "REACH" from 0 to 1.000. - New Adjustment Layer -> Add Gaussian Blur at 35 - Add Levels -> Select Alpha -> Set the arrows in the middle.
1:40

Quick After Effects Tutorial - Dripping Text Animation - Add CC Smear on a text layer -> Position the smear on each letter and animate the "REACH" from 0 to 1.000. - New Adjustment Layer -> Add Gaussian Blur at 35 - Add Levels -> Select Alpha -> Set the arrows in the middle.

Cash Design

175,943 views • 3 years ago

Introducing remocn/ui 😱 shadcn components, but for Remotion video No more building custom components, recording your screen, opening After Effects, and editing videos Now you can simply add a component to your code and turn it into a video Form filling, button clicks, select dropdown interactions, toast notifications, and 28 more components included 👇
0:59

Introducing remocn/ui 😱 shadcn components, but for Remotion video No more building custom components, recording your screen, opening After Effects, and editing videos Now you can simply add a component to your code and turn it into a video Form filling, button clicks, select dropdown interactions, toast notifications, and 28 more components included 👇

KapishDima

55,665 views • 8 days ago

Every L1/L2 chain needs good use cases to become or stay relevant and active. Onchain ticketing is the perfect use case to onboard the masses! Billions of tickets get sold every day. Which chains have TicketMaster killers? Layer-1s $ETH - OPEN Ticketing Ecosystem >8.2M tickets $TRX - none $BNB - none $BCH - none $SOL - XP, just started $TON - none $DOT - none $KAS - none $AVAX - tixbase 8.2M tickets $SOPH - onopenxyz >8.2M tickets $XTZ - onopenxyz once ready $ARB - none BASE - none $BLAST - none $OP - none $IMX - none $ZK - none MNT - none $STRK - none MANTA - none AEVO - none $SKL - none $METIS - none $LRC - none TAIKO - none $LSK - none MERL - none CTSI - none MYRIA - none $BOBA - none All chains do a poor job! OPEN Ticketing Ecosystem is chain agnostic, they provide a vast amount of transactions and volume (22M+ tickets per year), and the Ticketing engine is deployed on Polygon | POL and Sophon.
1:07

Every L1/L2 chain needs good use cases to become or stay relevant and active. Onchain ticketing is the perfect use case to onboard the masses! Billions of tickets get sold every day. Which chains have TicketMaster killers? Layer-1s $ETH - OPEN Ticketing Ecosystem >8.2M tickets $TRX - none $BNB - none $BCH - none $SOL - XP, just started $TON - none $DOT - none $KAS - none $AVAX - tixbase 8.2M tickets $SOPH - onopenxyz >8.2M tickets $XTZ - onopenxyz once ready $ARB - none BASE - none $BLAST - none $OP - none $IMX - none $ZK - none MNT - none $STRK - none MANTA - none AEVO - none $SKL - none $METIS - none $LRC - none TAIKO - none $LSK - none MERL - none CTSI - none MYRIA - none $BOBA - none All chains do a poor job! OPEN Ticketing Ecosystem is chain agnostic, they provide a vast amount of transactions and volume (22M+ tickets per year), and the Ticketing engine is deployed on Polygon | POL and Sophon.

Thijs

10,945 views • 1 year ago

Calendar built from scratch ↓ → Next.js hosted on Vercel → Tailwind CSS for styling → shadcn for beautiful and accessible components → nuqs for URL-based state management
0:26

Calendar built from scratch ↓ → Next.js hosted on Vercel → Tailwind CSS for styling → shadcn for beautiful and accessible components → nuqs for URL-based state management

João Melo

16,550 views • 1 year ago

The kings could smell a delicacy in the vicinity. I’m all for safari but give me none of this 😟
1:26

The kings could smell a delicacy in the vicinity. I’m all for safari but give me none of this 😟

Kgoshi Ya Lebowa

17,735 views • 10 months ago

Man advices other men to avoid families where none of the women are married
1:11

Man advices other men to avoid families where none of the women are married

Pop Feed

76,092 views • 4 months ago

Man tells people to avoid families where none of the ladies have a husband
1:10

Man tells people to avoid families where none of the ladies have a husband

Say it pop

130,420 views • 5 months ago

Safari in the iOS Simulator finally has a camera! In the latest update of SimCam we add mobile Safari support. Enjoy!
0:26

Safari in the iOS Simulator finally has a camera! In the latest update of SimCam we add mobile Safari support. Enjoy!

Krzysztof Magiera

13,473 views • 29 days ago

💡React tip: Use a custom hook to handle array states in your components
0:24

💡React tip: Use a custom hook to handle array states in your components

George Moller

119,692 views • 2 years ago

NONE OF THESE GIRLS COULD EVER SEE MY PEN>>>>
0:31

NONE OF THESE GIRLS COULD EVER SEE MY PEN>>>>

£MINAJ

10,937 views • 11 months ago

HUGE React Aria release! 🍿 🔍 Autocomplete: Command Palette, Searchable Select and Submenu examples 🆕 3 new components: Toast, Tree, and Virtualizer 🧩 Custom Menu/Popover/Tooltip triggers 🌉 Table colspan 👆 usePress interop, fixing 15+ issues 💨 Tailwind v4 📅 DatePicker RTL
0:30

HUGE React Aria release! 🍿 🔍 Autocomplete: Command Palette, Searchable Select and Submenu examples 🆕 3 new components: Toast, Tree, and Virtualizer 🧩 Custom Menu/Popover/Tooltip triggers 🌉 Table colspan 👆 usePress interop, fixing 15+ issues 💨 Tailwind v4 📅 DatePicker RTL

Devon Govett

47,334 views • 1 year ago

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.
0:47

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.

shadcn

421,013 views • 3 years ago

Even the California democratic supermajority demand answers from Gavin Newsom’s appointed Public Utilities Commission president about the SIX approved rate increases to consumers. I hope you’re sitting down, she has none.
1:39

Even the California democratic supermajority demand answers from Gavin Newsom’s appointed Public Utilities Commission president about the SIX approved rate increases to consumers. I hope you’re sitting down, she has none.

Kevin Dalton

69,093 views • 1 year ago

Sub 1 minute of “lesson planning” resulted in custom literature read aloud for my kids 🤯 Finally getting great on the fly lesson planning from my OpenClaw🦞 👏
2:42

Sub 1 minute of “lesson planning” resulted in custom literature read aloud for my kids 🤯 Finally getting great on the fly lesson planning from my OpenClaw🦞 👏

Jesse Genet

19,604 views • 3 months ago