Tailwind CSS Tutorial for Beginners (2023) - What YOU need to know

Sdílet
Vložit
  • čas přidán 2. 08. 2024
  • In this video I will teach you everything that you need to know about Tailwind CSS and also show you how and when to use it in your own projects. You don't need to watch a 3 hour tutorial to learn Tailwind - this video should give you all the information’s that you need.
    Tailwind Cheat Sheet: tailwindcomponents.com/cheats...

    === [ LIKE & SUBSCRIBE ] ===
    Please LIKE the video if you enjoyed it and
    SUBSCRIBE to the channel for more videos like that.
    CZcams ► www.youtube.com/@lukas.webdev...
    Instagram ► / lukas.webdev

    === [ VIDEO CHAPTERS ] ===
    00:00 - Intro
    00:53 - Basics
    01:47 - Benefits
    03:05 - Setup
    06:32 - My Advice
    08:14 - Let's Create
    14:33 - Customization
    21:50 - Outro
    #tailwindcss #tailwind #css

Komentáře • 205

  • @lukas.webdev
    @lukas.webdev  Před rokem +84

    Like this comment if you want to see a whole video about Responsive Design with Tailwind CSS or more videos about Tailwind in general … 👍
    
If you have another topic that you want me to cover, leave me a comment. 😉⬇

    • @lukas.webdev
      @lukas.webdev  Před rokem +3

      The next video about Tailwind CSS is already in the making and I will probably drop it this weekend - so don't forget to subscribe to get notified when I post the video. 😉

    • @ngonidzashesendama2471
      @ngonidzashesendama2471 Před rokem +2

      @@lukas.webdev Already subscribed! 🙂😊 I would be delighted if we could collaborate on a live stream, working on Tailwind CSS projects for web and mobile applications (react native and tailwind css)
      .

    • @lukas.webdev
      @lukas.webdev  Před rokem +2

      ​@@ngonidzashesendama2471 Welcome! This really means a lot to me. 🤩
      Thanks for this great idea, I’ll think about it ... 😉

    • @Jjextreme4411
      @Jjextreme4411 Před rokem +2

      excellent Lukas,, looking forward to more!

    • @mr.fanstastic9010
      @mr.fanstastic9010 Před rokem

      what do you mean by navigating to a folder?

  • @salijoghli
    @salijoghli Před rokem +11

    0:48 my man stared into my soul. couldnt't do anything but to like the video

    • @lukas.webdev
      @lukas.webdev  Před rokem +1

      Awesome, I'm happy to hear that my plan worked!! 😄💪
      Thanks a lot buddy, I really appreciate it. 😉

  • @codeakmnru
    @codeakmnru Před 11 měsíci +25

    This is the best Tailwind CSS video on CZcams! It's clear, concise, and engaging. Most CZcams mentors don't have this teaching skill. Thank you so much for sharing your knowledge!

    • @lukas.webdev
      @lukas.webdev  Před 11 měsíci +3

      My pleasure! Thank you very much, this really means a lot to me!! 🤩
      I'm glad you like it and I really appreciate your feedback!

    • @atetraxx
      @atetraxx Před 10 měsíci

      It's the buzzing audio and reverb for me

  • @ritamkayal1153
    @ritamkayal1153 Před 11 měsíci +7

    Trust me if you make in depth tutorial about web development your channel will take off like a rocket. Your teaching style is really amazing. Keep the good work doing. Thanks for making such videos

  • @user-mr9bz7tr4y
    @user-mr9bz7tr4y Před 9 měsíci

    This is the best video about tailwind, quick, says important stuff, it works for any framework you are working with, thank you! :)

  • @berakitesfu7008
    @berakitesfu7008 Před 3 měsíci +2

    Great stuff buddy, keep the good work.

  • @AvaneeshKumarSingh
    @AvaneeshKumarSingh Před rokem +57

    Release a full series on tailwind. Not by building a clone of any popular site, rather showing us how to create and use numerous UI elements in multiple projects.

    • @lukas.webdev
      @lukas.webdev  Před rokem +10

      Sounds like an interesting idea to me! Thanks, I’ll think about it. 😉

    • @AlbertoRodriguezIII
      @AlbertoRodriguezIII Před 6 měsíci

      @@lukas.webdev This would be great!

  • @TLTechbender
    @TLTechbender Před 2 měsíci

    Brilliant, straight to the point!!!

  • @ErsteSkywalker
    @ErsteSkywalker Před 8 měsíci

    Great vid. Appreciate it a ton!

  • @andrew_mandrichuk
    @andrew_mandrichuk Před 10 měsíci

    Thanks so MUCH love the video! dont stop and please dont quit youtube you will have a bright future!!!

  • @carlosm.1233
    @carlosm.1233 Před 10 měsíci +12

    Thank you for the great tutorial. It was short, concise and simple to follow. Please release a series where you show us how to build different UI components and more importantly how to customize them. That would be great. You gained a Subscriber here! Keep up the good work my man.

  • @Ttozyy
    @Ttozyy Před 6 měsíci

    I LOVE THIS!!!! thank you so much 🙂

  • @camilaalbuquerque1371
    @camilaalbuquerque1371 Před 3 měsíci +1

    much more helpful than many long articles or tutorials! thanks a lot for this video :D

  • @Ownagin
    @Ownagin Před 2 měsíci +1

    Great video mate, straight to the point, useful information 👐

  • @FrhankMaduka-lh5vo
    @FrhankMaduka-lh5vo Před 10 měsíci

    Concise and clear.
    Thank you.

  • @elcontrastador
    @elcontrastador Před 4 měsíci

    Very well done. Subscribed!

  • @StephenKarsch
    @StephenKarsch Před 5 měsíci

    Nice one. I've been struggling on and off with tailwind for a little bit, mostly the customization of components, but your explanation was very clear and concise and got me up and running quickly. Thank you!

  • @markantony9260
    @markantony9260 Před 6 měsíci

    Thank you. I really appreciate the content. Very concise, yet detailed for starters. 😁

  • @Tjommel
    @Tjommel Před měsícem

    Awesome video. thank you!

  • @alexlivadaru286
    @alexlivadaru286 Před 2 měsíci

    Thank you! Very useful tutorial!

  • @ranjanadissanayaka5390

    Thanks for this video

  • @binukbe4401
    @binukbe4401 Před rokem +12

    The best Tailwind CSS tutorial I have found so far. very informative. This channel needs to grow!🙌

    • @lukas.webdev
      @lukas.webdev  Před rokem +1

      Thank you, this really means a lot to me! 😉
      I'm happy to hear that and I really appreciate your feedback! ... and you're right, this channel needs to grow! 😄💪

    • @mladenkaorlic
      @mladenkaorlic Před rokem +1

      @@lukas.webdevi smashed the like button, i hate three hour tutorials!

    • @lukas.webdev
      @lukas.webdev  Před 10 měsíci

      @@mladenkaorlic Thanks, I really appreciate it! 😉

  • @benjminrichie
    @benjminrichie Před 11 dny

    Amazing

  • @thinkerhuh
    @thinkerhuh Před 6 měsíci

    THANK YOU SIR, you saved my life!

  • @afsarzan
    @afsarzan Před rokem +1

    Thank you for sharing , Lukas.

    • @lukas.webdev
      @lukas.webdev  Před rokem

      My pleasure! I’m glad you like it and I appreciate your feedback. 😉

  • @vikumvirajmanchanayaka3163

    straight to the point, best explanation🙌

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thank you very much, I really appreciate it! 🤩

  • @Ayman_youtube
    @Ayman_youtube Před 2 měsíci

    Thank you ,well explained

  • @RM-zj3zb
    @RM-zj3zb Před 9 měsíci

    Thank you very much!

  • @TheNewWebDeveloper
    @TheNewWebDeveloper Před 8 měsíci

    Thanks Lukas! I was confused why it wasn't working. Watching your video helped me realize that I was doing the installation of Tailwind CLI when I needed to be doing Tailwind CSS with Vite.

  • @rheavictor7
    @rheavictor7 Před 10 měsíci +1

    Very good tutorial, straight to the point, thanks!

    • @lukas.webdev
      @lukas.webdev  Před 10 měsíci

      My pleasure! I’m glad you like it, thanks for your feedback. 😉

  • @joeyx4056
    @joeyx4056 Před 9 měsíci

    Very concise and easy to follow

  • @CodingCompanion-zr6vu
    @CodingCompanion-zr6vu Před 9 měsíci

    thank u sooo very much sir 🙌🙌

  • @gangwang9641
    @gangwang9641 Před 10 měsíci

    thank u video, u provide a the best helpful tutorial.tailwind.css responsive design is very cool

  • @baster7537
    @baster7537 Před měsícem

    Love it

  • @bernardsamapoh3619
    @bernardsamapoh3619 Před 8 měsíci

    Your teaching skills are awesome.

  • @DCWang-dk2gn
    @DCWang-dk2gn Před 5 měsíci

    It's GOOD for me.Thanks.

  • @yuriyzadorozhnyi3849
    @yuriyzadorozhnyi3849 Před rokem +1

    Дякую Вам за потрібну мені інформацію ! Thank you so much! Lots of love from Ukraine !

  • @wolfie8748
    @wolfie8748 Před měsícem

    Super helpful

  • @oussamamassoudi7209
    @oussamamassoudi7209 Před 8 měsíci

    amazing beginner friendly work

  • @srizonsansar
    @srizonsansar Před měsícem

    Really a nice video, well explained, Tailwind CSS clear at one shot. I hope you will add more videos soon on other topics too.

  • @MazharAli-uq3sx
    @MazharAli-uq3sx Před rokem +1

    Awesome dear Soo gald to see your video

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thank you! I'm glad you like it and I really appreciate your feedback! 😉

  • @fernandoli6743
    @fernandoli6743 Před 4 měsíci

    Thx buddy, nice introduction

  • @dinesh.p8642
    @dinesh.p8642 Před 2 měsíci

    Dhanyavaad ji.

  • @SimonFabcic
    @SimonFabcic Před 8 měsíci

    I liked. But at the end, when I saw, that is worthed to like 😉
    Nice work, Lukas...

  • @xungka
    @xungka Před rokem +1

    Thank you. Amazing video, you're make my day Lukas. You have 1 subcriber more here, keep going bro!!!

    • @lukas.webdev
      @lukas.webdev  Před rokem +1

      My pleasure, buddy! Thank you for your feedback and for the sub, this really means a lot to me. 🤩

  • @robertejiogu1981
    @robertejiogu1981 Před 14 dny

    a responsive design on tailwind css will be very much appreciated

  • @AvaneeshKumarSingh
    @AvaneeshKumarSingh Před rokem +1

    Just subscribed.
    Keep up the good work 💐

    • @lukas.webdev
      @lukas.webdev  Před rokem +1

      Will do! Thank you very much, this really means a lot to me! 🤩

  • @olivermgrech
    @olivermgrech Před měsícem

    Hey Lukas! New to your channel, very good explanation thanks!

  • @adewaleadisa4346
    @adewaleadisa4346 Před měsícem

    well done

  • @luiseliasrodriguez4327
    @luiseliasrodriguez4327 Před měsícem

    Awesome lecture, super concise and clear, and yes you should keep doin React videos. Thanks.

  • @Rashomon69
    @Rashomon69 Před 6 měsíci

    SUBBED!

  • @Doc_Jaz
    @Doc_Jaz Před 11 měsíci +1

    perfect 👍🏻

    • @lukas.webdev
      @lukas.webdev  Před 11 měsíci

      I'm glad you like it, thanks for your feedback! 😉

  • @obong_samjoe
    @obong_samjoe Před 23 dny

    Thanks

  • @sachinthaprasad1388
    @sachinthaprasad1388 Před 11 měsíci +1

    This is awesome content bro you saved many hours. So thank you very much!! I became one of your subscriber 🙌

    • @lukas.webdev
      @lukas.webdev  Před 11 měsíci

      My pleasure, buddy! Thank you so much for your feedback and for the sub, it means the world to me!! 🤩

  • @navinkumarsahu1159
    @navinkumarsahu1159 Před rokem +1

    Awesome video 😊 ❤️ from India

    • @lukas.webdev
      @lukas.webdev  Před rokem

      You're welcome! Thanks for your feedback, I really appreciate it. 😉

  • @sidiebnou4958
    @sidiebnou4958 Před 5 měsíci

    great video.

  • @shreeramk
    @shreeramk Před 11 měsíci +1

    Awesomw explanation about tailwind css....

    • @lukas.webdev
      @lukas.webdev  Před 11 měsíci

      I'm glad you like it, thanks for your feedback! 😉

  • @danniellamaedviceda7325
    @danniellamaedviceda7325 Před rokem +1

    thank you Sir!

  • @ROVAKAN
    @ROVAKAN Před 4 měsíci

    Non boring , initial push giving tutorial . Thats my taste , sub++

  • @user-cf9ys8yp2d
    @user-cf9ys8yp2d Před 5 měsíci

    Good information

  • @user-wr1gj6ix1b
    @user-wr1gj6ix1b Před rokem +4

    nice one waiting for the full vdo on responsive design

    • @lukas.webdev
      @lukas.webdev  Před rokem +2

      Thanks for your feedback. I'm on it 😉
      Don't forget to subscribe, to get notified when I drop the video...

    • @lukas.webdev
      @lukas.webdev  Před rokem

      BTW: The new video is already online... 😉

  • @girishanker3796
    @girishanker3796 Před 10 měsíci +1

    Gold content 💜

  • @newfoundland1956
    @newfoundland1956 Před 8 dny

    i liked and subscribed

  • @Sakshamojha15
    @Sakshamojha15 Před rokem +1

    Nice video ❤

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thanks for your feedback, I'm happy that you like it! 😉

  • @Pareshbpatel
    @Pareshbpatel Před 2 měsíci

    A nice beginners tutorial on TailwindCSS. Thanks.
    {2024-05-16} - Subscribed!

  • @fernando19801980
    @fernando19801980 Před rokem +2

    Awesome video. Congratulations! I want to know about the "in-production" build (with optimizations) and how apply obfuscation. Thanks!

    • @lukas.webdev
      @lukas.webdev  Před 10 měsíci

      Thanks Fernando! I'm glad you like it and I really appreciate your feedback. 😉
      Also, thanks for the input - maybe I'll do a separate video about it.

  • @wadejohnson4542
    @wadejohnson4542 Před rokem +3

    Well done. Yes, please include more on mobile-first design with Tailwind. As well as creating custom classes.

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thank you for your feedback. I really appreciate it! 😉
      The video about Responsive Design with Tailwind CSS is already in the making and I will probably drop it this weekend - subscribe to get notified when I post the video 🤙

    • @lukas.webdev
      @lukas.webdev  Před rokem +1

      BTW: The new video is already online... 😉

    • @wadejohnson4542
      @wadejohnson4542 Před rokem +1

      @@lukas.webdev I'm on it! Thank you so much for sharing your knowledge and helping others.

    • @lukas.webdev
      @lukas.webdev  Před rokem

      @@wadejohnson4542 My pleasure! 😉

  • @yashbansod1722
    @yashbansod1722 Před rokem +2

    Nice video ❤❤

    • @lukas.webdev
      @lukas.webdev  Před rokem

      I'm glad you like it and I really appreciate your feedback! 😉
      Many more to come - make sure to subscribe so you don't miss out... ✌

  • @Romulan1993
    @Romulan1993 Před rokem +2

    Excellent channel. No idea how you don't have more subscribers.

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thanks, this really means a lot to me! I really appreciate your feedback. 😉

  • @aberefejiro
    @aberefejiro Před 11 měsíci +1

    Immediately subscribed

    • @lukas.webdev
      @lukas.webdev  Před 11 měsíci +1

      Thank you very much, this really means a lot to me! 🤩

  • @zuzukouzina-original
    @zuzukouzina-original Před 7 měsíci

    Thnx for this clear video, it really help me started with tailwind css. I come from Bulma css, which is good too, but not so flexible as tailwind.

  • @shabab3103
    @shabab3103 Před rokem +1

    Superb man❤

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thanks buddy, this really means a lot to me! 🤩

  • @freddyapaka6688
    @freddyapaka6688 Před 3 měsíci

    another video with more details on responsive design well be very much helpful

  • @georgiosmylonas3892
    @georgiosmylonas3892 Před měsícem

    I had to clear the cache of vite: `rm -rf node_modules/.vite` otherwise it wasn't working for some rason.
    Great tutorial!

  • @aamirmir9080
    @aamirmir9080 Před rokem +2

    nice

  • @andreask.291
    @andreask.291 Před rokem +1

    oh yes, I love tailwind because it is processed quickly by the browser. You can also assign classes for everything. I find that useful. But I'm still at the very beginning. I didn't even know that you can define your own classes (customize tailwind) . Now, of course, I want to learn more about it. So, as for me, I'm up for more interesting lessons for us folks all over the internet. 🤔💬💡😀👍🤗 👏📝

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thanks for your feedback! Yes, Tailwind is awesome and I would love to create another video about it ... I'll see what I can do 😉

  • @emadmohamed5787
    @emadmohamed5787 Před rokem +1

    Nice video
    Please we need a video for make a clone for CZcams by tailwind css by your amazing style 😅

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thanks for your feedback, I really appreciate it. 😉
      I am actually already working on a very similar video ... so stay tuned and subscribe to get notified when I drop the video. ✌

  • @ansh_mittal
    @ansh_mittal Před rokem +1

    You are my newest favourite mentor ❤❤ great knowledge, you clear my all doubt.

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thank you! This really means a lot to me. 🤩
      I'm glad I could help and I really appreciate your feedback!

    • @amruthamohan1471
      @amruthamohan1471 Před 6 měsíci

      ​@@lukas.webdev😊

  • @SebastianOnofrei
    @SebastianOnofrei Před měsícem

    Destroy the like button guys ! Lukas, your call to action was too good 😁

  • @MrDinakdakan
    @MrDinakdakan Před rokem +1

    You hair looks good, thanks for the tut

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Finally someone realizes that... 😄
      My pleasure, thanks for your feedback! 😉

  • @webdrakib
    @webdrakib Před rokem +1

    Please make more videos using tailwind css . I don't wanna use bootstrap any more.
    Thank you it was a great experience 😊 ❤

    • @lukas.webdev
      @lukas.webdev  Před rokem +1

      Thank you so much for your feedback, I'm happy to hear that!
      I already have: Next video will be online 1 hour ... 😉

  • @mokho3027
    @mokho3027 Před 11 měsíci

    ABSOLUTELY LOVED THIS TUTORIAL. you wanted to destroy the like button. i also destroyed the follow and notification button as well.

  • @CMoDZ3D
    @CMoDZ3D Před 7 měsíci

    Nvm the tutorial. I was blown away with the like button rgb when you mentioned it

  • @guptodhan6695
    @guptodhan6695 Před rokem +1

    I'm from bangladesh,,,,,,you are really genius......

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thank you very much, I really appreciate it! 🤩

  • @tafm3446
    @tafm3446 Před 10 měsíci

    I destroyed the like button but it respawned when I refreshed. Damn those devtools

  • @user-ol8jr6kk2y
    @user-ol8jr6kk2y Před 7 měsíci

    Good Video. Very informational. Appreciate it. Liked and subscribed. (y)

  • @user-vl3fm1be6y
    @user-vl3fm1be6y Před rokem +1

    I liked

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thank you! I really appreciate it and I'm happy that you like it! 😉

  • @shadab-8
    @shadab-8 Před rokem +2

    Amazing nice quick intro video and helpful. I started using tailwind css few months and its really fun to work with as the utility class names are very intuitive.

    • @lukas.webdev
      @lukas.webdev  Před rokem +2

      Thanks! I really appreciate your feedback and you're absolutely right with that!
      BTW: I'm currently working on a video about Creating Responsive Design with Tailwind CSS and I will probably drop it next week - this should be super helpful for you, if you want to learn even more useful things about Tailwind... 😉

    • @lukas.webdev
      @lukas.webdev  Před rokem +1

      BTW: The new video is already online... 😉

  • @hhossen1983
    @hhossen1983 Před 10 měsíci

    Please make full tutorial about tailwind css❤️

  • @c10ud17
    @c10ud17 Před 10 měsíci +1

    you’re the HOMIE

    • @lukas.webdev
      @lukas.webdev  Před 10 měsíci

      Thanks buddy, I really appreciate it! 😉

  • @alexanderherreramillet87
    @alexanderherreramillet87 Před 2 měsíci

    very usefull this video, thanks, i like a video for responsive, images, bye

  • @Jefferrey1
    @Jefferrey1 Před rokem +2

    Excellent video! Would love to see more about tailwind, especially responsive design

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thanks for your feedback, I'll consider it! 😉
      PS: I just posted a very detailed video about creating responsive design with Tailwind CSS - this should also be very helpful for you ✌

  • @ronaldo10m88
    @ronaldo10m88 Před 10 měsíci

    very beneficial, make more about
    videos responsive

  • @ajudmeister
    @ajudmeister Před 11 měsíci +1

    subscribed

    • @lukas.webdev
      @lukas.webdev  Před 11 měsíci

      Thank you very much Andreas, I really appreciate it! 🤩

  • @iriam7380
    @iriam7380 Před 5 měsíci

    Hi Lukas, thanks for the master class. It's been amazing ! I was wondering If you could share the extension or app that you use to make your browser responsive. Thanks !!!

  • @gabrielchima6916
    @gabrielchima6916 Před rokem +1

    I need responsive device in tailwind, Good lecture

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thanks for your feedback, I'm happy to hear that!
      I've also posted a video about how to create responsive Design with Tailwind CSS ... 😉

  • @hellboy6167
    @hellboy6167 Před rokem +1

    Please do more videos on Tailwind

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Thanks for your feedback, I'm happy that you like it!
      The next video about Tailwind CSS is already in the making and I will probably already drop it this weekend - subscribe to get notified when I post the video. 😉

    • @lukas.webdev
      @lukas.webdev  Před rokem

      BTW: The new video is already online... 😉

  • @barbarosteomankosoglu6602

    A new subscriber here. Can you please make a video about your vscode setting, like theme, cursor etc.

    • @lukas.webdev
      @lukas.webdev  Před rokem

      Awesome, welcome! This really means a lot to me. 🤩
      Thanks for your request, it's on my list now ... 😉

  • @ravendelarama426
    @ravendelarama426 Před rokem +1

    New subscriber here

    • @lukas.webdev
      @lukas.webdev  Před rokem +1

      Awesome! Thank you so much, I really appreciate it. 😉

  • @shubhamthaker9380
    @shubhamthaker9380 Před 7 měsíci

    amazing content
    how do i get the pointer like you ????? that beeping pointer