No video :(

Floating Labels with Tailwind CSS

Подписаться 94 тыс.

Просмотров 101 тыс.

50% 1

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...

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 150

@himanshusrivastava931 3 года назад

Whenever a new video comes from this channel, first I 'like' the video then I watch it. 😁

@themsaid 3 года назад

Simon is GOAT

@dotkeyz 3 года назад

Just did now 😁

@MrSonicastra 3 года назад

Haha i do the same :)

@KunalGulati7 3 года назад

Hi Himanshu, would like to connect with you on call for some tailwind theme creation if interested let me know.

@iamfaizanarif 3 года назад

Same 2 u

@rfmiotto 3 года назад

Again, one more awesome material by Tailwind Labs! You are a game changer for web developers. I also learned CSS a lot from you.

@igdev6095 3 года назад

You guys can add "select-none" and "pointer-events-none" for best experience!

@87whateva 2 года назад

Thank you very much. That was the missing piece for a great UX!

@mc-ty4br 3 года назад

Without those screencasts, I'd only know about the basics of tailwindcss. Thank you!

@Yaxqb 2 года назад

This is insane and i would never in my life want to implement this in raw css Bravo!!!

@flanger001 Год назад

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 💜

@ApoorvMote 3 года назад

I have about 20 forms on my site. This is going to dramatically change everything. Thanks Tailwind.

@jeffnikelson5824 2 года назад

you're a magician man just found out about tailwind and every day I'm more and more convinced thank you so much

@swyxTV 3 года назад

Simon you’re crushing it. Love the demo and the editing and the music!

@simonswiss 3 года назад

Thanks! 🙏 Yeah I am slowly getting the hang of it all 🎉

@isaaccloos1084 3 года назад

Yooo, that shot at the end was great 👍🏻

@simonswiss 3 года назад

My son just read that! ✨ Thank you 🙏

@andreich1980 3 года назад

Great stuff! I did this just the other day. Some more of UX improvements: add this classes to labels `pointer-text pointer-events-none`.

@BharatKumarDhaker 3 года назад

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

@Laratips 3 года назад

Mind blowing. Doing this only with css is just amazing.

@MOGE_ 6 месяцев назад

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.

@adamtak3128 3 года назад

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.

@RyanRampersad 3 года назад

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!

@pagarevijayy 3 года назад

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!

@aislanarislou 3 года назад

There is a form plugin ?

@shafu_xyz 3 года назад

JIT has made tailwindcss even better!

@io_inc 3 месяца назад

I like this, simple and minimalistic

@telegramvideos1313 2 года назад

I'm commited to learn new tailwind trick every day, this is the trick for today.. Thanks !

@mamtaagarwal1009 3 года назад

Tailwind is just getting better. Let's go

@sharvinpingulkar3844 Год назад

Thank you! You solved my issue and changed my thought process on how to approach this kind of issue. Keep smashing!

@AndresMarquezOk 2 года назад

The best effect is 7:14 "pru".. Great video! Thanks!!!

@notfadeaway6617 Год назад

i like these small detail tricks

@AntNZ 2 года назад

I'm sooooo using this - i had no idea this was possible with css\tailwind. Mind = blown.

@MrSonicastra 3 года назад

Cool Simon, i was looking today for that on RU-vid! I'm glad i found it 😁. Lifesaver, thumps up.

@mbparvezme 2 года назад

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.

@talgatsaribayev821 3 года назад

why not use display: flex and change order? Other than that thanks. It is always amazing.

@ashutoshanand4263 3 года назад

Had the same thought

@rfmiotto 3 года назад

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).

@alfredomontoya4087 2 года назад

Excellent work and explanation, thank you very much for everything.

@jimmyj.6792 3 года назад

Holy crap this awesome tip 😍 thanks a lot 😀😀 accessibility power 💪

@ayazsheikh6827 3 года назад

Hope you have recovered from ribs injury.. tha ks for your beautiful work

@simonswiss 3 года назад

Not quite yet - but this video was recorded just before the accident!

@ayazsheikh6827 3 года назад

@@simonswiss wish you speedy recovery!

@ShaharHarshuv 8 месяцев назад

Amazing!

@ObviouslyProgrammer Год назад

Thank you this is so nice!

@beni0208tube 2 года назад

For the label => "pointer-events-none"

@hcsftw 3 года назад

Hi Simon, instead of absolute you could have used flex on the div and order on the input and label to fix this.

@modprog 2 года назад

you can also use a space in the placeholder IIRC

@cristianpallares7565 3 года назад

Nice! Thanks for the video. Learned something new

@ayobamijimoh4953 2 года назад

awesome, thank you

@AndreNitschke 2 года назад

Nice Workflow, but is this with the label after input not a problem for screen-readers?

@AndreNitschke 2 года назад

aria-labelledby in input field with id from label - should solve this problem. Nice

@daretobedangerous6552 Год назад

your tutorials are amazing! cheers mate

@nick97000 3 года назад

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!

@osman3404 3 года назад

Omg that’s awesome but i wish that was the default of placeholders to Begin with

@breezycodes Год назад

How do you get your classes to stay on different lines?

@MOGE_ 6 месяцев назад

press enter

@mdekramulhassanavi1819 Год назад

Thank you it's help me a lot.

@hariniran6360 2 года назад

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 !

@DongQian 3 года назад

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

@thomasfindlay2034 3 года назад

I asked Adam about it recently, but unfortunately, he said that it's not going to be added.

@harvanchik 3 года назад

Incredible! Thanks so much!

@jamesgrubb 2 года назад

Thanks great information. I had to add a class for when the form is actually filled in ' .label:not(:empty) { @apply -top-5; }'

@kumardeepam 11 месяцев назад

this is so sleek

@dharyelsantoshonorio5890 Год назад

awesome! thanks!

@aislanarislou 3 года назад

Now a video teaching how to make a ripple effect into buttons : )

@girishnashipudi6933 3 года назад

Awesome! Thank you.

@deephousefridays1911 2 года назад

I wish I could add more than one like! Awesome videos!

@mnik0128 2 года назад

Instead of -top-3.5 u can make parent 'flex flex-col-revese' or use order class for positioning

@PixelRubble 2 года назад

Fantastic trick for text boxes. Do you have a similar trick for drop downs in order to keep page styling similar?

@alitonoliveira1700 Год назад

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.

@yuriyvasilyev7785 Год назад

You should never animate “physical” properties such as “top” in your example. It’s not browser-friendly. Use “transform: translateY” instead.

@necrotikS 5 месяцев назад

You could at least say why, or send the source of this information...

@perfect.stealth 2 месяца назад

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

@joyontokarmakar5765 2 года назад

What is the name of your PREVIEW extension??

@user-eg6yo8pk4i Год назад

Very Good!

@SusanthCom 2 года назад

Awsome Video

@FrederickROS 3 года назад

Super good content as usual. I hope your ribs are going to cure soon!

@wahyusa 3 года назад

Awesome !! Thank you

@GustavAgar 3 года назад

excellent 🙌 make more videos please

@vinayrwt 3 года назад

Waiting for it 😂

@azam920 3 года назад

Yeah waitingable videos 😅👍👍

@mryechkin 3 года назад

That is DOPE! 🤯

@EkySambora 2 года назад

Great tutorial

@amirnoorani5017 3 года назад

Best tuts from you

@CARUSAR21 3 года назад

Just amazing

@khaledelhoushi8834 Год назад

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?

@nyambe 2 года назад

wooo 😘, will be using it

@mass-im Год назад

Great content as always! Tnx!!! Is it possible to move the styles into an @layer @apply directive?

@Sabutofons 3 года назад

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?

@xidnebwoz Год назад

Awesome！

@NeerajKumar-mm4rl 3 года назад

Simon, which font family you are using in code editor. Subscribed 😀

@vigneshwaranrenganathan7743 Год назад

great work, is it possible to bring same effect using and ?

@thanossmponias2915 3 года назад

just amazing . . . .

@gamingklex9010 3 года назад

Are you always making these small templates before the video, or where are you getting these?

@samueljagestedt6479 3 месяца назад

seems like a ux problem that the user can't click the placeholder to focus the input.

@Nate-gi7no 2 года назад

anyone have a problem with not being able to click through the labels to focus the input? am i doing something wrong?

@HassanHajX 3 года назад

How did you do the wavy red lines ? Is it possible to do that with just tailwind ?

@xamantiwari 3 года назад

Svg actually

@ed1nh0 3 года назад

Wondering if there some attr or prop, or even a behavior I could not use a class for it!

@Sashankyt 3 года назад

I am not getting the peer-placeholder selector in the tailwind docs. It is sometimes hard to know what is available and what not.

@lucasj.pereira4912 3 года назад

Does it work in any browser or only recent versions? Asking because some css options does not work in older browsers

@mohakmaheshwari8756 2 года назад

Peer class is not working anymore plz help.

@kukasn Год назад

What of select input anyone help me with that

@DanielDrummond2k6 2 года назад

Do you intend to create courses on Tailwind 3.0 or do you already have one?

@ahmadabuaysheh 3 года назад

is this available in the documentation?? I tried to search for it but couldn't find it.

@subhranshudas8862 Год назад

black magic.

@it-s-me-mohit 3 года назад

Awesome 👍👍👍

@sebsobseb 3 года назад

In terms of accessibility, does it matter to have the label after the input?

@flanger001 Год назад

So long as the "for" attribute is set correctly it will still be accessible!

@iamsiddd007 3 года назад

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.

@mohamedyoussef8835 Год назад

Awesome video +++++++++++++++ 🙂

@codephilip 3 года назад

Awesome 😎

@mitchellchrist5372 3 года назад

great approach to floating labels, but i hate how much bloat tailwind adds

@AmxCsifier 3 года назад

Is there a way to regroup the variant classes?

@Zoutzuurtjes 2 года назад

What theme are you using?

@Habesha_Today 10 месяцев назад

your vscode font?

@LRXAORLOV 3 года назад

This is very cool) how can I improve accessibility for such a solution ?

@paulalexander796 2 года назад

Gozu :)

@__su_man 2 года назад

Can anyone tell me, which font is this?