Styling Forms with Tailwind CSS

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 153

  • @jslbrt
    @jslbrt 3 роки тому +64

    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 роки тому +73

    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 роки тому +10

      Thank you for this awesome comment! ❤️

    • @vigoworkchannel1681
      @vigoworkchannel1681 3 роки тому +4

      Exactly! Me too!

    • @pjguitar15
      @pjguitar15 2 роки тому +3

      Yeah few weeks ago I said "Goodbye" to Bootstrap and said "Hello" to Tailwind 😁

  • @benfrese3573
    @benfrese3573 2 роки тому

    God damn, I was SO CLOSE to start a project without this plugin. So glad I took the time to watch. Amazing stuff!

  • @techsoluteintegrated9972
    @techsoluteintegrated9972 2 роки тому

    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

  • @StevenOBird
    @StevenOBird 3 роки тому +5

    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! :)

  • @ShiloBuff
    @ShiloBuff Рік тому

    The quality and explanations are top knotch. Only downside to this video is the cursive font for the text editor. Subscribed.

  • @thanhnguyenhoai2727
    @thanhnguyenhoai2727 3 роки тому +1

    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!

  • @mitulkanani8363
    @mitulkanani8363 3 роки тому +1

    I am in love ❤️️ with Tailwind CSS, it's mindblowing and speeds up the design process. Awesome video content.

  • @ivan_off
    @ivan_off 3 роки тому +1

    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.

  • @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!

  • @rmavuluri-version
    @rmavuluri-version 3 роки тому +1

    Brilliant @tailwindcss teamwork. Really appreciated guys. you guys are making everyone's life easier. 👏👏👏

  • @vovandarius
    @vovandarius Місяць тому

    Really neat! Thanks so much for a thorough explanation!

  • @sornt
    @sornt 3 роки тому

    I already fall in love tailwindcss.

  • @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!

  • @matthiasfanger9893
    @matthiasfanger9893 3 роки тому

    Thank you! 15 Minutes of your Video can save a ton of hours with trial and error 👏

  • @Claudio_Pereira
    @Claudio_Pereira 3 роки тому +2

    Wow! Your videos are extremely straightforward! Congratulations on your work and thank you for sharing! Your tips make me a better dev.

  • @c-damocles
    @c-damocles 2 роки тому

    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 😆

  • @uquantum
    @uquantum 2 роки тому

    Addictive tutorials...joy to watch, listen and learn from

  • @sundards9613
    @sundards9613 3 роки тому +4

    Awesome you guys are reduced lot of development Time⌚ hats off to the team.

    • @moracabanas
      @moracabanas 3 роки тому +1

      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

  • @CodingNuggets
    @CodingNuggets 3 роки тому +2

    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!

  • @arthurschilling5651
    @arthurschilling5651 3 роки тому +1

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

  • @fyardlest1
    @fyardlest1 3 роки тому +1

    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.

  • @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!!!

  • @xicheung7867
    @xicheung7867 3 роки тому

    "@apply: ..."
    Tailwind defo won my heart with this one!

  • @behzodjon
    @behzodjon 3 роки тому +1

    Just a great video!! God bless you!

  • @guillermomedel1575
    @guillermomedel1575 3 роки тому

    I haven't even watched the video yet but since it's Tailwind Labs they already got my like.

  • @normankamper-leymann1191
    @normankamper-leymann1191 3 роки тому

    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.

  • @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!

  • @raymondmichael4987
    @raymondmichael4987 3 роки тому

    well, what can I say! it's just awesome, now that I'm diving into this

  • @uxweb
    @uxweb 3 роки тому

    This is pretty slick! Really enjoy building for the web using tailwindcss

  • @mrjebbar
    @mrjebbar Рік тому

    Excellent content. Many thanks for your time and efforts.

  • @forinda
    @forinda 2 роки тому

    Thank you! Just what I wanted

  • @jimmyj.6792
    @jimmyj.6792 3 роки тому +1

    Really great video in detail with preview and concrete use case 👌 thanks a lot

  • @muhammadaqibbinazam
    @muhammadaqibbinazam 2 роки тому

    Thank you very much for this wonderful video ❤

  • @fm_abid
    @fm_abid 3 роки тому

    man, I loved this. was looking or something like this from Tailwind. Great, keep going

  • @jawyor-k3t
    @jawyor-k3t Рік тому

    Amazing work!

  • @TTArmor
    @TTArmor 2 роки тому

    Damn! This was a really good video! Wish i found it last week tho 😂 Going to redo the whole site now with the plugin!

  • @zacharyflynn06
    @zacharyflynn06 9 місяців тому

    Yeah, thats a game-changer. Thanks!

  • @henkhavenga570
    @henkhavenga570 3 роки тому +1

    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?

  • @simplyuy
    @simplyuy 3 роки тому +1

    Marvelous! 🎨🖌️🔥

  • @anglerpocky
    @anglerpocky 3 роки тому

    Most excellent timing! 🙏

  • @ifindev
    @ifindev 4 місяці тому

    Really awesome!!

  • @osherezra8460
    @osherezra8460 3 роки тому +1

    Thanks awesome tutorial keep it up guys

  • @pankajbokdia
    @pankajbokdia 2 роки тому

    Thank you soo much for doing what you do!

  • @Nayan-o2b
    @Nayan-o2b 2 дні тому

    you guys are the best

  • @jacobgraf83
    @jacobgraf83 3 роки тому +3

    Are you using a plug-in for the preview or is that native VS Code?

    • @jimmyj.6792
      @jimmyj.6792 3 роки тому +2

      Interested too 👍

    • @simonswiss
      @simonswiss 3 роки тому +8

      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 2 роки тому

      @@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!

  • @arubin1978
    @arubin1978 3 роки тому

    Nice done, thanks for the video? Does it support RTL? For example direction of the select caret...

  • @WarrenRunk
    @WarrenRunk 3 роки тому +1

    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!

  • @CarlFurrow
    @CarlFurrow 3 роки тому

    Really great video and plugin!

  • @AlejandroVivas
    @AlejandroVivas 3 роки тому +1

    I really love you and tailwindcss!!

  • @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!

  • @husnulaman
    @husnulaman 3 роки тому

    Tailwind always delivers 😍

  • @__haah
    @__haah 3 роки тому

    Awesome and clear, cheers Simon! :)

  • @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!

  • @jollyjerr
    @jollyjerr 3 роки тому

    So awesome. Thanks for the great video!

  • @danielChibuogwu
    @danielChibuogwu 2 роки тому

    your videos are so good💯🔥, thank you for the contents

  • @cyb
    @cyb 3 роки тому +1

    How do you do that live preview? Is that a vscode extension?

  • @abhishkk
    @abhishkk 3 роки тому

    This is so helpful!! Thank you.

  • @cintron3d
    @cintron3d 3 роки тому

    Tailwind just keeps getting better. I can't wait to switch away from bootstrap

  • @mhasancoder
    @mhasancoder 2 роки тому

    Nice video mate 😍

  • @tririfandani1876
    @tririfandani1876 3 роки тому

    unpopular opinion: TailwindCSS is the best CSS framework

  • @a.rakoto5094
    @a.rakoto5094 2 роки тому

    very clear :) thank you!

  • @britti73
    @britti73 2 роки тому

    This is so cool! Thank you for a perfect tutorial

  • @megh219
    @megh219 3 роки тому

    Very well explained!! great video

  • @alphacentorus
    @alphacentorus 3 роки тому

    Insteresting :) . So curiosity are you french ?

  • @bassman2145
    @bassman2145 Рік тому

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

  • @NadeemGorsi
    @NadeemGorsi 3 роки тому

    Many Likes!!

  • @michongoma7598
    @michongoma7598 3 роки тому

    Awesome!!! Thank you so much

  • @raphaeljaggerd3585
    @raphaeljaggerd3585 3 роки тому +1

    Yay!!

  • @shaungbhone8368
    @shaungbhone8368 3 роки тому +1

    Nice background love it 💕

  • @mainuddin9230
    @mainuddin9230 3 роки тому

    Great video..
    What is your vs code font name?

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

  • @bitmagie
    @bitmagie 3 роки тому

    awsome

  • @pablobello0
    @pablobello0 3 роки тому

    Amazing!

  • @hbela1000
    @hbela1000 Рік тому

    cool, thx.

  • @daltonyon
    @daltonyon 3 роки тому

    Nice bro!!!! Help me a lot!!!

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

  • @anuroop748
    @anuroop748 3 роки тому

    Wow 👍

  • @randriamahandryrado9800
    @randriamahandryrado9800 3 роки тому

    Thank you, it's very helpfull. Does anyone know what theme and fonts he use for VS Code ?

  • @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 ;)

  • @zeddscarlxrd4331
    @zeddscarlxrd4331 Рік тому

    great

  • @Rhidayah
    @Rhidayah 2 роки тому

    I like how you pronounce "shadow"

  • @amirbahador.developer
    @amirbahador.developer 2 роки тому

    ty sir 🙏🏻🌷🌹❤️👍

  • @al_mamun
    @al_mamun 3 роки тому +1

    Here your todo list state for all tailwind official plugins:
    - [x] @tailwindcss/line-clamp
    - [x] @tailwindcss/forms
    - [ ] @tailwindcss/typography
    - [ ] @tailwindcss/aspect-ratio

    • @lh536
      @lh536 3 роки тому

      hey... where can I find line-clamp plugin video? 👍 Thanks!

    • @al_mamun
      @al_mamun 3 роки тому +1

      m.ua-cam.com/video/klh-jMTm5PU/v-deo.html

    • @lh536
      @lh536 3 роки тому

      @@al_mamun thank you!

  • @manuelperes4995
    @manuelperes4995 3 роки тому

    it 's so great pretty nice Thanks

  • @charlesdoley
    @charlesdoley 3 роки тому

    Very addictive 😘

  • @anstapol
    @anstapol 3 роки тому

    Hey nice video! Is there any way of replicating your setup for VSCode?

  • @amjedbouhouch7993
    @amjedbouhouch7993 3 роки тому

    Say no more for libraries and for heavy packages. And start make your own components with Tailwindcss ❤

  • @amitmondal7427
    @amitmondal7427 3 роки тому

    Useful.

  • @icokie
    @icokie 3 роки тому

    awesome :)

  • @DespicariPirates
    @DespicariPirates Рік тому

    what about the options value, how can u customize them

    • @merictunc
      @merictunc Місяць тому

      you can't style options

  • @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?

  • @borisbob
    @borisbob 3 роки тому

    thank you

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

  • @KasimSheyi
    @KasimSheyi 3 роки тому

    Is there a way to add a border-left to the arrow in the select tag?

  • @Faisal50x
    @Faisal50x 3 роки тому

    you rocks

  • @JohnCamacho
    @JohnCamacho 2 роки тому

    how are you able to nest @apply inside of @layer? My build process is giving this error: "@apply is not supported within nested at-rules like @layer. You can fix this by un-nesting @layer"

  • @shaharyarahmed9899
    @shaharyarahmed9899 3 роки тому

    So what is the difference b/w @tailwindcss/forms and @tailwindcss/ui?

  • @jorgenUA
    @jorgenUA 3 роки тому

    cool video. I think you need to improve responsiveness (reduce the amount of code), and the framework will become almost perfect.

  • @louisgac87
    @louisgac87 3 роки тому

    Great, but where can I copy/paste your code? :)