You entirely changed my mind on this pattern. I hated this when I first saw it because it was always implemented some buggy JS that interfered with password managers. But a pure CSS implementation? Absolute genius. Thank you 💜
Cool tips, I was looking this for days, -- One thing left in there I think, -- cursor ---> label in text area cause issue to override the cursor-text -- so the solution is --> label default & peer-focus 'cursor-default' and in peer-placeholder-shown it should be cursor-text
This is really great. Thanks for making a video on it. The pattern is popular and while I think it looks funny and actually more confusing, I understand why people like it!
Awesome design by an awesome tool. A suggestion for a little improvement in the terms of UX. Class "cursor-text" for the label would be really good to make a fluent UX feel.
So I have a silent problem where I can't type if I click directly on the peer-placeholder, please help. If I can anywhere else in the input field and it's fine !
If you ask about the parent div that wraps the input and label tags having a flex col-reverse attribute, I don't think it would fix the problem. This is because the peer will still be listening to the previous sibling in the DOM (that is, in the HTML structure and not necessarily the component you see in the screen).
In 4:14c you were typing "class="absolute left-0 -top-3.5(grey image)text-gray-600 text-sm"". Does this code act like CSS or is it the code in the CSS portion or file affecting the webpage?
Lovely video and definitely going to implement this solution. How would you handle autocomplete? When I hover over an autocomplete option, the labels and the filled in values appear on top of each other!
I hope tailwindcss can write multiple classes to one pseudo-classes. For example hover:[text-red-500, bg-white, ...] instead of repeat `hover:` again and again, it makes the class name list way too long. I think there are libraries that help with this, but I would like to see it as build-in support. Thanks
Whenever a new video comes from this channel, first I 'like' the video then I watch it. 😁
Simon is GOAT
Just did now 😁
Haha i do the same :)
Hi Himanshu, would like to connect with you on call for some tailwind theme creation if interested let me know.
Same 2 u
Again, one more awesome material by Tailwind Labs!
You are a game changer for web developers. I also learned CSS a lot from you.
You guys can add "select-none" and "pointer-events-none" for best experience!
Thank you very much. That was the missing piece for a great UX!
you're a magician man
just found out about tailwind and every day I'm more and more convinced
thank you so much
Without those screencasts, I'd only know about the basics of tailwindcss. Thank you!
I have about 20 forms on my site. This is going to dramatically change everything. Thanks Tailwind.
Yooo, that shot at the end was great 👍🏻
My son just read that! ✨ Thank you 🙏
Simon you’re crushing it. Love the demo and the editing and the music!
Thanks! 🙏 Yeah I am slowly getting the hang of it all 🎉
You entirely changed my mind on this pattern. I hated this when I first saw it because it was always implemented some buggy JS that interfered with password managers. But a pure CSS implementation? Absolute genius. Thank you 💜
This is insane and i would never in my life want to implement this in raw css
Bravo!!!
Thank you! You solved my issue and changed my thought process on how to approach this kind of issue. Keep smashing!
I thought the end of the video will be like.. now tailwind takes care of all of this in our forms plugin lol. Nice video btw!
There is a form plugin ?
Cool tips, I was looking this for days, -- One thing left in there I think, -- cursor ---> label in text area cause issue to override the cursor-text -- so the solution is --> label default & peer-focus 'cursor-default' and in peer-placeholder-shown it should be cursor-text
Great stuff! I did this just the other day. Some more of UX improvements: add this classes to labels `pointer-text pointer-events-none`.
This is really great. Thanks for making a video on it. The pattern is popular and while I think it looks funny and actually more confusing, I understand why people like it!
Mind blowing. Doing this only with css is just amazing.
The best effect is 7:14 "pru".. Great video! Thanks!!!
JIT has made tailwindcss even better!
I'm commited to learn new tailwind trick every day, this is the trick for today.. Thanks !
Tailwind is just getting better. Let's go
Love the simplicity. ❤
This is my favorite approach to handling labels and inputs. I'm so happy I don't have to write custom css for it anymore.
I like this, simple and minimalistic
Cool Simon, i was looking today for that on RUclips! I'm glad i found it 😁. Lifesaver, thumps up.
you can also use a space in the placeholder IIRC
naaaaaaah I thought i knew tailwind before watching this video. I could literally feel my proverbial tailwind skill bar go up as I watched this.
Hope you have recovered from ribs injury.. tha ks for your beautiful work
Not quite yet - but this video was recorded just before the accident!
@@simonswiss wish you speedy recovery!
i like these small detail tricks
Excellent work and explanation, thank you very much for everything.
Awesome design by an awesome tool. A suggestion for a little improvement in the terms of UX. Class "cursor-text" for the label would be really good to make a fluent UX feel.
So I have a silent problem where I can't type if I click directly on the peer-placeholder, please help. If I can anywhere else in the input field and it's fine !
Hi Simon, instead of absolute you could have used flex on the div and order on the input and label to fix this.
I'm sooooo using this - i had no idea this was possible with css\tailwind. Mind = blown.
Holy crap this awesome tip 😍 thanks a lot 😀😀 accessibility power 💪
your tutorials are amazing! cheers mate
why not use display: flex and change order? Other than that thanks. It is always amazing.
Had the same thought
If you ask about the parent div that wraps the input and label tags having a flex col-reverse attribute, I don't think it would fix the problem. This is because the peer will still be listening to the previous sibling in the DOM (that is, in the HTML structure and not necessarily the component you see in the screen).
In 4:14c you were typing "class="absolute left-0 -top-3.5(grey image)text-gray-600 text-sm"". Does this code act like CSS or is it the code in the CSS portion or file affecting the webpage?
Great video! I don't know how to feel about the property names being in cursive.
Amazing!
Nice Workflow, but is this with the label after input not a problem for screen-readers?
aria-labelledby in input field with id from label - should solve this problem. Nice
Lovely video and definitely going to implement this solution. How would you handle autocomplete? When I hover over an autocomplete option, the labels and the filled in values appear on top of each other!
How to make the label go up as soon as I click on the input? The way you showed it only goes up when I start typing.
Nice! Thanks for the video. Learned something new
I hope tailwindcss can write multiple classes to one pseudo-classes. For example hover:[text-red-500, bg-white, ...] instead of repeat `hover:` again and again, it makes the class name list way too long. I think there are libraries that help with this, but I would like to see it as build-in support. Thanks
I asked Adam about it recently, but unfortunately, he said that it's not going to be added.
Great tutorial
For the label => "pointer-events-none"
Great content as always! Tnx!!!
Is it possible to move the styles into an @layer @apply directive?
Wondering if there some attr or prop, or even a behavior I could not use a class for it!
What is the name of your PREVIEW extension??
Thank you this is so nice!
I am not getting the peer-placeholder selector in the tailwind docs. It is sometimes hard to know what is available and what not.
Fantastic trick for text boxes. Do you have a similar trick for drop downs in order to keep page styling similar?
great work, is it possible to bring same effect using and ?
Incredible! Thanks so much!
How do you get your classes to stay on different lines?
press enter
I wish I could add more than one like! Awesome videos!
Awsome Video
I am using vscode prettier extension but it doesn't format my tailwind classes to use multiline like it did for Simon. Am I missing any settings?
Omg that’s awesome but i wish that was the default of placeholders to Begin with
Instead of -top-3.5 u can make parent 'flex flex-col-revese' or use order class for positioning
Awesome! Thank you.
Thank you it's help me a lot.
awesome, thank you
anyone have a problem with not being able to click through the labels to focus the input? am i doing something wrong?
How did you do the wavy red lines ? Is it possible to do that with just tailwind ?
Svg actually
Always incredible videos and content 👏🏼
is this available in the documentation?? I tried to search for it but couldn't find it.
Now a video teaching how to make a ripple effect into buttons : )
Thanks great information. I had to add a class for when the form is actually filled in ' .label:not(:empty) {
@apply -top-5;
}'
Simon, which font family you are using in code editor. Subscribed 😀
Does it work in any browser or only recent versions? Asking because some css options does not work in older browsers
Do you intend to create courses on Tailwind 3.0 or do you already have one?
What of select input anyone help me with that
Best tuts from you
Super good content as usual. I hope your ribs are going to cure soon!
Can anyone tell me, which font is this?
Just amazing
thank you!
seems like a ux problem that the user can't click the placeholder to focus the input.
Peer class is not working anymore plz help.
When I click label it doesn't work. Is that supposed to happen or did I do something wrong. If anyone knows please let me know.
In terms of accessibility, does it matter to have the label after the input?
So long as the "for" attribute is set correctly it will still be accessible!
wooo 😘, will be using it
Are you always making these small templates before the video, or where are you getting these?
That is DOPE! 🤯
This is very cool) how can I improve accessibility for such a solution ?
Is there a way to regroup the variant classes?
this is so sleek
What theme are you using?
just amazing . . . .
your vscode font?
VS Code Auto-Complete Tailwindcas not working
Awesome 👍👍👍
excellent 🙌 make more videos please
Awesome！
Awesome 😎
Awesome video +++++++++++++++ 🙂
Hello, Please How are you ?
Please i can have the name of your VS Code Font...
great approach to floating labels, but i hate how much bloat tailwind adds
Awesome job !