Floating Labels with Tailwind CSS
ฝัง
- เผยแพร่เมื่อ 29 ก.ย. 2024
- In this video, you'll learn how to pull off that cool "floating labels" effect using just Tailwind CSS utility classes. We'll use a bunch of new features added in Tailwind CSS v2.2, including the new placeholder-shown variants and the `peer` sibling selector variant.
Source code: play.tailwindc...
Tailwind CSS v2.2: blog.tailwindc...
![Advanced TailwindCSS Techniques You Have To Know?! [8 concepts]](/img/n.gif)
Again, one more awesome material by Tailwind Labs!
You are a game changer for web developers. I also learned CSS a lot from you.
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
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 ?
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.
Awesome video +++++++++++++++ 🙂
Is there a way to regroup the variant classes?
bad music
You should never animate “physical” properties such as “top” in your example. It’s not browser-friendly. Use “transform: translateY” instead.
You could at least say why, or send the source of this information...
If I'm not mistaken, translate keeps the physical location meaning you can't click the field as the label would be a layer above the field and there by block the click
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!
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).
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 !
What is the name of your PREVIEW extension??
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 🙏
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 💜
For the label => "pointer-events-none"
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 stuff! I did this just the other day. Some more of UX improvements: add this classes to labels `pointer-text pointer-events-none`.
How do you get your classes to stay on different lines?
press enter
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
My head hurts so much trying to combine this with the ugly yellow background of the autofillers... and simple form...
Anyway, great tutoriel, 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!
When Your Cat step on your keyboard .. The easiest solution is Delete miss typed and see what was written 😎😎
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 🎉
Without those screencasts, I'd only know about the basics of tailwindcss. Thank you!
Amazing!
anyone have a problem with not being able to click through the labels to focus the input? am i doing something wrong?
Hello, Please How are you ?
Please i can have the name of your VS Code Font...
seems like a ux problem that the user can't click the placeholder to focus the input.
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!
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
Peer class is not working anymore plz help.
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.
Holy crap this awesome tip 😍 thanks a lot 😀😀 accessibility power 💪
Mind blowing. Doing this only with css is just amazing.
So you basically have to define the same classes to every single input field on the form? This feels VERY repetitive to me..... if you have a form with 5+ fields - you'd need to do the same classes on every single input field...... am I missing something here?
If you're using tailwind, you're probably also using some sort of component based framework/library like React, Vue Svelte etc, in which case you'd make each field a component, define their classes once within the component, then use those components different places.
That said I'm not a big fan of using tailwind for complex components. I'd rather create BEM classmates and declare their CSS in a dedicated CSS file
This is insane and i would never in my life want to implement this in raw css
Bravo!!!
Fantastic trick for text boxes. Do you have a similar trick for drop downs in order to keep page styling similar?
Hi Simon, instead of absolute you could have used flex on the div and order on the input and label to fix this.
What of select input anyone help me with that
I like this, simple and minimalistic
add "cursor-text" on the label
Thank you it's help me a lot.
Tailwind is just getting better. Let's go
Thank you this is so nice!
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?
JIT has made tailwindcss even better!
your vscode font?
awesome, thank you
Brooop
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.
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?
Thanks great information. I had to add a class for when the form is actually filled in ' .label:not(:empty) {
@apply -top-5;
}'
this is so sleek
awesome! thanks!
Bye2 library 😂
Awsome Video
Great content as always! Tnx!!!
Is it possible to move the styles into an @layer @apply directive?
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.
black magic.
Instead of -top-3.5 u can make parent 'flex flex-col-revese' or use order class for positioning
Thank you! You solved my issue and changed my thought process on how to approach this kind of issue. Keep smashing!
Very Good!
VS Code Auto-Complete Tailwindcas not working
Awesome！
great work, is it possible to bring same effect using and ?
Gozu :)
Cool Simon, i was looking today for that on TH-cam! I'm glad i found it 😁. Lifesaver, thumps up.
I'm commited to learn new tailwind trick every day, this is the trick for today.. Thanks !
Hello. What text editor do you use? It looks really cool.
How did you do the wavy red lines ? Is it possible to do that with just tailwind ?
Svg actually
keep this up and I'll be able to fire all my designers..... muahahahahaha
Great tutorial
Wondering if there some attr or prop, or even a behavior I could not use a class for it!
The best effect is 7:14 "pru".. Great video! Thanks!!!
I am not getting the peer-placeholder selector in the tailwind docs. It is sometimes hard to know what is available and what not.
Simon, which font family you are using in code editor. Subscribed 😀
Excellent work and explanation, thank you very much for everything.
is this available in the documentation?? I tried to search for it but couldn't find it.
you're a magician man
just found out about tailwind and every day I'm more and more convinced
thank you so much
This is very cool) how can I improve accessibility for such a solution ?
Are you always making these small templates before the video, or where are you getting these?
Omg that’s awesome but i wish that was the default of placeholders to Begin with
Do you intend to create courses on Tailwind 3.0 or do you already have one?
great approach to floating labels, but i hate how much bloat tailwind adds
Does it work in any browser or only recent versions? Asking because some css options does not work in older browsers
I wish I could add more than one like! Awesome videos!
Now a video teaching how to make a ripple effect into buttons : )
Super good content as usual. I hope your ribs are going to cure soon!
your tutorials are amazing! cheers mate
you can also use a space in the placeholder IIRC
Waiting for it 😂
Yeah waitingable videos 😅👍👍
Can anyone tell me, which font is this?
where is peer?
To enable `peer` class, you need to be in : mode: 'jit' into your tailwind.config.js
Nice! Thanks for the video. Learned something new
excellent 🙌 make more videos please
wooo 😘, will be using it
i like these small detail tricks
What theme are you using?