Тёмный

Styling Forms with Tailwind CSS 

Tailwind Labs
Подписаться 93 тыс.
Просмотров 140 тыс.
50% 1

In this video, we look at how to style form elements in Tailwind CSS using utility classes, and how the official `@tailwindcss/forms` plugin even make it possible to easily customize select menu, radio buttons, and checkboxes.
Source code: play.tailwindcss.com/oOpq1MifsS
Documentation: github.com/tailwindlabs/tailw...

Наука

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

 

7 мар 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 153   
@jslbrt
@jslbrt 3 года назад
I'm almost addicted to your videos because of the high quality of production and education. I'm officially a Tailwind fan!
@DerickMasai
@DerickMasai 3 года назад
Hello! I just want to say thank you to all of you who created and continue to work on Tailwind. A friend of mine recommended it to me in January and my first thought was "why would you waste your time on this when Bootstrap already exists?" but just following your 1st tutorial video 5 days ago changed my perspective and how I code forever. I can't even remember how I was bumbling about for so long before this innovation 😂 But seriously, thank you so much and be blessed guys ❤️️
@simonswiss
@simonswiss 3 года назад
Thank you for this awesome comment! ❤️
@vigoworkchannel1681
@vigoworkchannel1681 3 года назад
Exactly! Me too!
@pjguitar15
@pjguitar15 Год назад
Yeah few weeks ago I said "Goodbye" to Bootstrap and said "Hello" to Tailwind 😁
@rickyanthony
@rickyanthony 7 месяцев назад
​@@pjguitar15I'm about to go tailwind too.
@dance2die
@dance2die 3 года назад
Every single TW videos are so educative. Thank you for sharing~
@hulk6315
@hulk6315 3 года назад
@Abel Ulises lol how can the developers be so foolish that they explicitly used the term fake_input for variables in source code to include a false password lol you should have just used babel gobshite.
@hulk6315
@hulk6315 3 года назад
​@Abel Ulises And, for the record, your code is a f**king disaster, next time, employ better developers.
@StevenOBird
@StevenOBird 3 года назад
Dear Simon, keep up doing videos like this. You mention important points, make it very clear what happens (in the background) and have an awesome pace in my opinion. Following your videos (and also those by Adam of course!) made me love TailwindCSS in such a short time! :)
@techsoluteintegrated9972
@techsoluteintegrated9972 Год назад
Tailwind Labs, you are guys are great. I recently (about a year now ) learnt about tailwindCSS and ever since then, I have used it either fully or partially in every project. Thank you for making styling and theming painless
@CodingNuggets
@CodingNuggets 3 года назад
I am loving all of these videos. Definitely helping give some different ideas on using Tailwind in different scenarios. Appreciate the hard work your putting in. See you soon!
@edwardjr.5688
@edwardjr.5688 3 года назад
I'm getting started with Tailwind and its nice to know that are content like yours that can make things easier. Thanks!
@arthurschilling5651
@arthurschilling5651 3 года назад
Dude these videos are the best thing, I’m so happy to have found this! So useful and well explained, easy to understand and practical! Keep’em coming!!
@Claudio_Pereira
@Claudio_Pereira 3 года назад
Wow! Your videos are extremely straightforward! Congratulations on your work and thank you for sharing! Your tips make me a better dev.
@mitulkanani8363
@mitulkanani8363 3 года назад
I am in love ❤️️ with Tailwind CSS, it's mindblowing and speeds up the design process. Awesome video content.
@constitutionvoice
@constitutionvoice 3 года назад
Brilliant @tailwindcss teamwork. Really appreciated guys. you guys are making everyone's life easier. 👏👏👏
@benfrese3573
@benfrese3573 Год назад
God damn, I was SO CLOSE to start a project without this plugin. So glad I took the time to watch. Amazing stuff!
@BneiAnusim
@BneiAnusim Год назад
Loving TW! I've been learning it for a couple of weeks now and I'm about to start a new project with it! 🥳 Thanks!
@ivan_off
@ivan_off 3 года назад
I love this framework better than bootstrap now especially because you can customize the states of an element directly by writing the classes - so useful! And big thank you for this awesome video, forms are usually not the easiest to style.
@thanhnguyenhoai2727
@thanhnguyenhoai2727 3 года назад
First time i'm an early bird for adopting dope technology, great to be here before Tailwindcss becomes the most popular/used css framework out there. Love using it!
@fm_abid
@fm_abid 3 года назад
man, I loved this. was looking or something like this from Tailwind. Great, keep going
@jimmyj.6792
@jimmyj.6792 3 года назад
Really great video in detail with preview and concrete use case 👌 thanks a lot
@uxweb
@uxweb 3 года назад
This is pretty slick! Really enjoy building for the web using tailwindcss
@matthiasfanger9893
@matthiasfanger9893 3 года назад
Thank you! 15 Minutes of your Video can save a ton of hours with trial and error 👏
@catreunion
@catreunion 2 года назад
Hi Simon, thank you so much for giving us a great tutorial. 15:45 is the magic moment that blew my mind! Thank you!!!
@fyardlest1
@fyardlest1 3 года назад
Really like the form thanks a lot! One of the best thing that seems a little bit difficult to do with Tailwind CSS is stepper, (checkout steps). Hope to find tutorials out there to do so, one day.
@normankamper-leymann1191
@normankamper-leymann1191 2 года назад
Thanks for the great video. Having customForms in the tailwind config v1 was much nicer though. I hope they add the possibility to easily define defaults in the tailwind config for v2 forms back.
@ShiloBuff
@ShiloBuff Год назад
The quality and explanations are top knotch. Only downside to this video is the cursive font for the text editor. Subscribed.
@xicheung7867
@xicheung7867 3 года назад
"@apply: ..." Tailwind defo won my heart with this one!
@sundards9613
@sundards9613 3 года назад
Awesome you guys are reduced lot of development Time⌚ hats off to the team.
@moracabanas
@moracabanas 3 года назад
I love frontend but I just can't enjoy writting CSS until I discovered tailwind. It is so frustrating, so time sompsuming to style a single element I sometimes forget what I was trying to achieve, and it is so hard to notice if you are doing what you are intended to... then one day you try CSS with intellisense and there is no back
@guillermomedel1575
@guillermomedel1575 3 года назад
I haven't even watched the video yet but since it's Tailwind Labs they already got my like.
@__haah
@__haah 3 года назад
Awesome and clear, cheers Simon! :)
@mrjebbar
@mrjebbar Год назад
Excellent content. Many thanks for your time and efforts.
@muhammadaqibbinazam
@muhammadaqibbinazam Год назад
Thank you very much for this wonderful video ❤
@TTArmor
@TTArmor Год назад
Damn! This was a really good video! Wish i found it last week tho 😂 Going to redo the whole site now with the plugin!
@AlejandroVivas
@AlejandroVivas 3 года назад
I really love you and tailwindcss!!
@c-damocles
@c-damocles Год назад
Very impressed with the '@apply' directive. I thought for a second we were going to have to end up writing out the free-form CSS anyways 😆
@jollyjerr
@jollyjerr 3 года назад
So awesome. Thanks for the great video!
@danielChibuogwu
@danielChibuogwu Год назад
your videos are so good💯🔥, thank you for the contents
@sornt
@sornt 2 года назад
I already fall in love tailwindcss.
@britti73
@britti73 2 года назад
This is so cool! Thank you for a perfect tutorial
@CarlFurrow
@CarlFurrow 3 года назад
Really great video and plugin!
@forinda
@forinda 2 года назад
Thank you! Just what I wanted
@uquantum
@uquantum Год назад
Addictive tutorials...joy to watch, listen and learn from
@ZynthProductions
@ZynthProductions 3 года назад
i always created a custom style for my form i dont even know there is a form plugins lol i miss it on the docs thankyou for this awesome tutorial!
@sincethatmoment
@sincethatmoment Год назад
Amazing work!
@simplyuy
@simplyuy 3 года назад
Marvelous! 🎨🖌️🔥
@megh219
@megh219 3 года назад
Very well explained!! great video
@osherezra8460
@osherezra8460 3 года назад
Thanks awesome tutorial keep it up guys
@anglerpocky
@anglerpocky 3 года назад
Most excellent timing! 🙏
@behzodjon
@behzodjon 2 года назад
Just a great video!! God bless you!
@pankajbokdia
@pankajbokdia 2 года назад
Thank you soo much for doing what you do!
@henkhavenga570
@henkhavenga570 3 года назад
Thank you for demonstrating this. I've been battling to style the select element. Now I know. One question though: how did you style the actual dropdown list? Mine still has a white background with blue highlight. How can I style the appearance of the dropdown list?
@mhasancoder
@mhasancoder 2 года назад
Nice video mate 😍
@raymondmichael4987
@raymondmichael4987 2 года назад
well, what can I say! it's just awesome, now that I'm diving into this
@michaelkhalsa
@michaelkhalsa 8 месяцев назад
Very helpful, thanks!
@abhishkk
@abhishkk 2 года назад
This is so helpful!! Thank you.
@shaungbhone8368
@shaungbhone8368 3 года назад
Nice background love it 💕
@husnulaman
@husnulaman 3 года назад
Tailwind always delivers 😍
@lh536
@lh536 3 года назад
Great video! Really amazing! I have some questions/issues... On the select field how can I change the caret color according to text color? and how can I stylish the select input (border radius, options background color... etc...)? why the style of a textarea field doesn't fits to the rest of the form? Thanks for your support!
@daltonyon
@daltonyon 2 года назад
Nice bro!!!! Help me a lot!!!
@arubin1978
@arubin1978 3 года назад
Nice done, thanks for the video? Does it support RTL? For example direction of the select caret...
@ifindev
@ifindev 8 дней назад
Really awesome!!
@ewildgoose
@ewildgoose 3 года назад
Could you cover some styles for fancy checkbox buttons please! I would like to see how you would style the classic toggle button that animates (without JavaScript). Also how you might do button style check boxes (eg green button for checked, red for unchecked, static label). Thanks!
@WarrenRunk
@WarrenRunk 3 года назад
For select, is there a way to change the background color/text of the currently selected option? This also seems to still vary between desktop and mobile so perhaps the answer is no. Either way thanks for the great video!
@zacharyflynn77
@zacharyflynn77 5 месяцев назад
Yeah, thats a game-changer. Thanks!
@michongoma7598
@michongoma7598 3 года назад
Awesome!!! Thank you so much
@a.rakoto5094
@a.rakoto5094 2 года назад
very clear :) thank you!
@renu3463
@renu3463 3 года назад
Really helpful 🔥🔥
@randriamahandryrado9800
@randriamahandryrado9800 3 года назад
Thank you, it's very helpfull. Does anyone know what theme and fonts he use for VS Code ?
@manuelperes4995
@manuelperes4995 3 года назад
it 's so great pretty nice Thanks
@cyb
@cyb 3 года назад
How do you do that live preview? Is that a vscode extension?
@forno_nicolas
@forno_nicolas Год назад
Thanks for this tutorial... Tailwind forms plugin seems like black magic before LOL
@ApoorvMote
@ApoorvMote 3 года назад
Thanks for explaining. But how are you able to override styles set by forms plugin with classes? I use typography plugin and I specify exact height for image. But typography plugin adds default top and botton margin for img in em based on screen sizes. I couldn't override it with classes in html. I had to override them in config. This also goes for all styles set by typograpy plugin. I cannot modify them in html at single location. I have to disable it completely and rewrite everywhere.
@bassman2145
@bassman2145 9 месяцев назад
Great and very helpful video! Does anybody know what font Simon is using in his code editor? I love it and I would like to obtain/use the same. Thanks!!!
@KasimSheyi
@KasimSheyi 3 года назад
Is there a way to add a border-left to the arrow in the select tag?
@whatthefunction9140
@whatthefunction9140 3 года назад
If I have a set of tw styles I add to every input, is there a way to group them and just add that name as a class?
@gndreload
@gndreload 3 года назад
Hello, this is awesome. Thank you for sharing. What if I want to customize the options for the select input ?
@tlgr3g
@tlgr3g 3 года назад
Not possible with css at the moment. You would need to reimplement the dropdown. Tailwind's answer is Headless UI, which is an unstyled component library (react, vue). There are not many components there yet, but the select/dropdown is one that's covered.
@alphacentorus
@alphacentorus 2 года назад
Insteresting :) . So curiosity are you french ?
@pablobello0
@pablobello0 3 года назад
Amazing!
@DespicariPirates
@DespicariPirates Год назад
what about the options value, how can u customize them
@mityukov
@mityukov 3 года назад
Is there a way to scope that "form elements resets"? Like, apply them only within '.tw-form' containers? Otherwise, it's kind of another bootstrap ;)
@mainuddin9230
@mainuddin9230 2 года назад
Great video.. What is your vs code font name?
@YCode_
@YCode_ 4 месяца назад
thank you
@antontraceur
@antontraceur 2 года назад
Hey nice video! Is there any way of replicating your setup for VSCode?
@NadeemGorsi
@NadeemGorsi 3 года назад
Many Likes!!
@EnterOsaka
@EnterOsaka Год назад
I'm having trouble getting my checkbox styling to work! I've added the plugin, but I'm running into an issue. Has anyone had this issue yet?
@charlesdoley
@charlesdoley 2 года назад
Very addictive 😘
@amirbahador.developer
@amirbahador.developer Год назад
ty sir 🙏🏻🌷🌹❤️👍
@shaharyarahmed9899
@shaharyarahmed9899 3 года назад
So what is the difference b/w @tailwindcss/forms and @tailwindcss/ui?
@jacobgraf83
@jacobgraf83 3 года назад
Are you using a plug-in for the preview or is that native VS Code?
@jimmyj.6792
@jimmyj.6792 3 года назад
Interested too 👍
@simonswiss
@simonswiss 3 года назад
That's a vscode we've started implementing internally - we will eventually make it public and talk about it, _perhaps_, _at some point_. 🤞
@gustavkjellin2405
@gustavkjellin2405 Год назад
@@simonswiss Did anything ever happen on this? I'm doing a workshop at work next week where I'm introducing tw to our devs. Would be awesome to not have to switch back and forth to the browser. Cheers!
@ricardomm6535
@ricardomm6535 3 года назад
thank u so much. 1 more subscriber
@cintron3d
@cintron3d 3 года назад
Tailwind just keeps getting better. I can't wait to switch away from bootstrap
@fabiojansen4286
@fabiojansen4286 3 года назад
The styles are always inline style? or i can extract to a separate .css file?
@moracabanas
@moracabanas 3 года назад
You can actually apply tailwind utilities on regular CSS .classnames Try to write a .class and use @apply directive to write all tailwind stuff as if it was legacy css on a separate css file. Then import your CSS file on your html like a regular CSS stylesheet.
@raphaeljaggerd3585
@raphaeljaggerd3585 3 года назад
Yay!!
@daksheshgupta7045
@daksheshgupta7045 3 года назад
whats the font family in the code editor ?
@hbela1000
@hbela1000 Год назад
cool, thx.
@amitmondal7427
@amitmondal7427 3 года назад
Useful.
@trampsport
@trampsport 2 года назад
what is the sense to use this plugin if select arrow stops flipping after adding it???
@awksomeid6965
@awksomeid6965 2 года назад
fucking amazing. this is exactly what i need. i’m so frustrated to style the select and options 🙄. W3c need to do some sh*t on this.
@ganumelodyr6031
@ganumelodyr6031 2 года назад
Which text editor u r using
@bitmagie
@bitmagie 2 года назад
awsome
@icokie
@icokie 3 года назад
awesome :)
@joaquinretola5649
@joaquinretola5649 2 года назад
Hi! I had a problem applying this plugin. Any Headless UI component I use, doesn't reset. If someone knows how to solve it, i'll be pleased :D
@sopanroy1506
@sopanroy1506 Год назад
What is the font used in vscode 🌝 please tell me someone
Далее
Theming Tailwind with CSS Variables
27:24
Просмотров 121 тыс.
This or That 🛍️
00:52
Просмотров 4,8 млн
НОВАЯ ПАСХАЛКА В ЯНДЕКСЕ
00:20
Просмотров 233 тыс.
I WISH I Knew These Tailwind Tips Earlier
9:15
Просмотров 175 тыс.
What's New in Tailwind CSS v2.2
21:21
Просмотров 51 тыс.
Translating a Custom Design System to Tailwind CSS
10:10
10 Tailwind Classes I Wish I Knew Earlier
13:31
Просмотров 171 тыс.
Incredible scroll-based animations with CSS-only
32:23
Просмотров 390 тыс.
Building Intercom's Inbox UI with Tailwind CSS
1:51:50
Просмотров 164 тыс.
iPhone socket cleaning #Fixit
0:30
Просмотров 14 млн
Choose a phone for your mom
0:20
Просмотров 7 млн