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?
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
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!
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.
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 💜
The best effect is 7:14 "pru".. Great video! Thanks!!!
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 🎉
Yooo, that shot at the end was great 👍🏻
My son just read that! ✨ Thank you 🙏
Mind blowing. Doing this only with css is just amazing.
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 insane and i would never in my life want to implement this in raw css
Bravo!!!
Great stuff! I did this just the other day. Some more of UX improvements: add this classes to labels `pointer-text pointer-events-none`.
Thank you! You solved my issue and changed my thought process on how to approach this kind of issue. Keep smashing!
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!
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 ?
Love the simplicity. ❤
I'm commited to learn new tailwind trick every day, this is the trick for today.. Thanks !
JIT has made tailwindcss even better!
I like this, simple and minimalistic
Tailwind is just getting better. Let's go
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.
you can also use a space in the placeholder IIRC
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.
Cool Simon, i was looking today for that on UA-cam! I'm glad i found it 😁. Lifesaver, thumps up.
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'm sooooo using this - i had no idea this was possible with css\tailwind. Mind = blown.
Amazing!
i like these small detail tricks
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.
Great tutorial
Excellent work and explanation, thank you very much for everything.
Holy crap this awesome tip 😍 thanks a lot 😀😀 accessibility power 💪
What is the name of your PREVIEW extension??
your tutorials are amazing! cheers mate
Hi Simon, instead of absolute you could have used flex on the div and order on the input and label to fix this.
For the label => "pointer-events-none"
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 !
Thank you this is so nice!
Nice! Thanks for the video. Learned something new
Great video! I don't know how to feel about the property names being in cursive.
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).
Wondering if there some attr or prop, or even a behavior I could not use a class for it!
How do you get your classes to stay on different lines?
press enter
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?
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.
I wish I could add more than one like! Awesome videos!
Omg that’s awesome but i wish that was the default of placeholders to Begin with
Incredible! Thanks so much!
awesome, thank you
Instead of -top-3.5 u can make parent 'flex flex-col-revese' or use order class for positioning
Great content as always! Tnx!!!
Is it possible to move the styles into an @layer @apply directive?
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.
Thank you it's help me a lot.
Thanks great information. I had to add a class for when the form is actually filled in ' .label:not(:empty) {
@apply -top-5;
}'
great work, is it possible to bring same effect using and ?
Best tuts from you
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?
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
Now a video teaching how to make a ripple effect into buttons : )
I am not getting the peer-placeholder selector in the tailwind docs. It is sometimes hard to know what is available and what not.
thank you!
Fantastic trick for text boxes. Do you have a similar trick for drop downs in order to keep page styling similar?
Awesome! Thank you.
Awsome Video
anyone have a problem with not being able to click through the labels to focus the input? am i doing something wrong?
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!
Peer class is not working anymore plz help.
That is DOPE! 🤯
this is so sleek
wooo 😘, will be using it
Just amazing
What of select input anyone help me with that
is this available in the documentation?? I tried to search for it but couldn't find it.
Super good content as usual. I hope your ribs are going to cure soon!
seems like a ux problem that the user can't click the placeholder to focus the input.
Can anyone tell me, which font is this?
Awesome！
Awesome 👍👍👍
just amazing . . . .
Is there a way to regroup the variant classes?
VS Code Auto-Complete Tailwindcas not working
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.
What theme are you using?
Do you intend to create courses on Tailwind 3.0 or do you already have one?
excellent 🙌 make more videos please
How did you do the wavy red lines ? Is it possible to do that with just tailwind ?
Svg actually
Awesome 😎
your vscode font?
Does it work in any browser or only recent versions? Asking because some css options does not work in older browsers
Awesome video +++++++++++++++ 🙂
Always incredible videos and content 👏🏼
Simon, which font family you are using in code editor. Subscribed 😀
Cool
This is very cool) how can I improve accessibility for such a solution ?
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!
Hello, Please How are you ?
Please i can have the name of your VS Code Font...
Are you always making these small templates before the video, or where are you getting these?
great approach to floating labels, but i hate how much bloat tailwind adds