Lukas | Web Development & Design
Lukas | Web Development & Design
  • Видео 11
  • Просмотров 671 037
5 Tailwind CSS Pro Tips I Wish I Knew Earlier (2024)
In this video I will show you 5 Tips for Tailwind that you NEED to know in 2024. They will help you to use Tailwind CSS like a Pro.
Tailwind Cheat Sheet: nerdcave.com/tailwind-cheat-sheet
Tailwind Documentation: tailwindcss.com/docs
Tailwind CSS IntelliSense: marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Prettier Plugin for Tailwind CSS: tailwindcss.com/blog/automatic-class-sorting-with-prettier
=== [ MY TAILWIND VIDEOS ] ===
The BEST Way to Create Responsive Design with Tailwind CSS (2024) ► ruclips.net/video/PuovsjZN11Y/видео.html
Tailwind CSS Tutorial for Beginners (2024) - What YOU need to know ► ruclips.net/video/DenUCuq4G04/видео.html
The FAST Way to Install Tailwi...
Просмотров: 4 783

Видео

The FAST Way to Install Tailwind CSS in 2024 - Tutorial for Beginners with Vite + React
Просмотров 245День назад
In this video I will show you one of the fastest and most popular methods to install Tailwind CSS in 2024. We’re going to install Tailwind with Vite into a React Project. Tailwind Documentation: tailwindcss.com/docs Download Node.js: nodejs.org Installation Guide that we use in this video: tailwindcss.com/docs/guides/vite [ MY NEW PROJECT ] I’m currently working on an affordable, comprehensive ...
useEffect React Hook Tutorial (2024) - What YOU need to know
Просмотров 3,3 тыс.Год назад
In this video I cover everything that you need to know about the React Hook "useEffect". I'm going to teach you when and how to actually use this hook and tell you everything you need to know about dependency arrays and cleanup functions. This video is part of a series where I cover all the important React Hooks that you need to know in 2024: useState: ruclips.net/video/lwFluBLxZdA/видео.html u...
How to ACTUALLY become a Frontend Developer in 2024 - The ONLY Roadmap that you need.
Просмотров 3,6 тыс.Год назад
In this video I will tell you about everything that you need to know if you want to become a Frontend Developer in 2024. I’ll tell you if it’s still worth it, how AI has changed the roadmap and why it’s not enough anymore, to just learn HTML, CSS and JavaScript. I’ll share my 5-step Roadmap with you and give you all the information’s that you need to succeed in this field. Download Visual Studi...
The BEST Way to Create Responsive Design with Tailwind CSS (2024)
Просмотров 170 тыс.Год назад
In this video I will teach you how to create Responsive Web Designs with Tailwind CSS. This video covers everything you need to know, from the basics to breakpoints & breakpoint ranges and even customization options - this video should give you all the information’s that you need. Tailwind CSS Tutorial (2024): ruclips.net/video/DenUCuq4G04/видео.html [ LIKE & SUBSCRIBE ] Please LIKE the video i...
Tailwind CSS Tutorial for Beginners (2024) - What YOU need to know
Просмотров 165 тыс.Год назад
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: nerdcave.com/tailwind-cheat-sheet [ LIKE & SUBSCRIBE ] Please LIKE the video if you enjoyed it and SUBS...
Learn useState in 8 Minutes - React Hooks Explained (2023)
Просмотров 1,5 тыс.Год назад
In this video I cover everything you need to know about the most popular React hook useState. I’ll explain you when and how to use it and we also create two mini projects together. This is the beginning of a series of videos where I cover all the important hooks in React you need to know and use in 2023. [ LIKE & SUBSCRIBE ] Please LIKE the video if you enjoyed it and SUBSCRIBE to the channel f...
The 5 Best VS Code Extensions YOU MUST TRY in 2023
Просмотров 2,4 тыс.Год назад
This video is about the 5 Best VS Code Extensions YOU MUST TRY in 2023. I'm pretty sure that you don't know and use all of them - but you definitely should. They will help you to create code faster and to prevent mistakes. [ LIKE & SUBSCRIBE ] Please LIKE the video if you enjoyed it and SUBSCRIBE to the channel for more videos like that. RUclips ► www.youtube.com/@lukas.webdev?sub_confirmation=...
Top 10 CSS Features You Should Know & Use in 2024
Просмотров 315 тыс.Год назад
This video is about the Top 10 CSS Features you should know and use in 2024. I'm pretty sure that you don't know all of them - but you definitely should. They will help you to write better code. [ LIKE & SUBSCRIBE ] Please LIKE the video if you enjoyed it and SUBSCRIBE to the channel for more videos like that. RUclips ► www.youtube.com/@lukas.webdev?sub_confirmation=1 Instagram ► ...
Responsive Navigation Bar - Tutorial, 2021 - HTML, CSS, JavaScript
Просмотров 3,4 тыс.3 года назад
In this video we are going to create an amazing and responsive navigation bar, only using some basic HTML, CSS and JavaScript. For that Tutorial we are going to use this editor: Visual Studio Code | Download-Link: code.visualstudio.com/download [ FEATURED TOPICS ] Flexbox, Media Queries, Mobile Navigation, Animations, Keyframes, Google Fonts, Event Listener, Conditional Statements and other hel...

Комментарии

  • @373323
    @373323 6 часов назад

    your cheetsheet link is broken now ...

    • @lukas.webdev
      @lukas.webdev Час назад

      I just changed the link - it should work now! 😉

  • @kingsbeetv7437
    @kingsbeetv7437 День назад

    This tutorial is the best tailwind tutorial I have been looking for, Thanks for sharing

  • @komeiltaheri
    @komeiltaheri 2 дня назад

    At 1:14, in fact classes are not inherited by child elements , its happening because some css styles like "color" are inherited by design, and some are not, so maybe this was what you meant but it could be misunderstood.

    • @lukas.webdev
      @lukas.webdev 2 дня назад

      You're absolutely right! Thanks for pointing that out - that’s exactly what I meant to convey. Another viewer mentioned it as well, and while I can't update the video, I think adding this information to my pinned comment is a great idea. 😉

    • @komeiltaheri
      @komeiltaheri День назад

      @@lukas.webdev Oh i just saw @nemethricsi's comment =), yeah pinning comment will do, best of luck <3

    • @lukas.webdev
      @lukas.webdev День назад

      @@komeiltaheri Thanks, I really appreciate it! :)

  • @gbkEmilgbk
    @gbkEmilgbk 2 дня назад

    thanx for good introduction to tailwind

    • @lukas.webdev
      @lukas.webdev День назад

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

  • @aram5642
    @aram5642 2 дня назад

    "Don't use tailwind, like a pro"

  • @igorr4682
    @igorr4682 3 дня назад

    Child/Children

  • @ogulcanbozkurt3542
    @ogulcanbozkurt3542 3 дня назад

    Sorry but nothing crazy here. For example on the last example, you can just give a text color on the button and use hover: instead of peer and group. No need to overcomplicate things.

    • @lukas.webdev
      @lukas.webdev 2 дня назад

      Thank you for your feedback, Oğulcan! I have to agree - in hindsight, these examples may not have been the best choice to highlight the advantages of the peer and group utilities. I’ll make sure to include clearer and more impactful examples in future videos. Your input helps me grow, so I really appreciate it! 😉

  • @fatema8eee
    @fatema8eee 3 дня назад

    Dislike for lie

    • @lukas.webdev
      @lukas.webdev 3 дня назад

      I'm sorry if something came across as misleading. Could you clarify what you mean exactly?

    • @_jovian
      @_jovian 2 дня назад

      ​@lukas.webdev likely the cringe begging for likes and subs, specifically the tailwind site nonsense. Just casually ask somewhere in the video, you don't gotta be weird about it...

    • @fatema8eee
      @fatema8eee 2 дня назад

      @@_jovian We should dislike and report the video. Unsubscribe also if subscribed.

    • @lukas.webdev
      @lukas.webdev 2 дня назад

      ​@@_jovian Got it - thanks for pointing that out. I didn’t give it much thought at the time, but I understand now and won’t do it again. Sorry about that!

    • @lukas.webdev
      @lukas.webdev 2 дня назад

      @@fatema8eee I understand why you feel that way, and I appreciate you sharing your thoughts. I’ve already taken your feedback into account and won’t approach it the same way in the future. My goal is to create value, not to annoy anyone!

  • @nemethricsi
    @nemethricsi 4 дня назад

    I’m just at the beginning of the video. But quick note: not the css classes are inheriting but the specific css rules. And not all of them! For example “color” (the css rule behind text-red-500) does. This isn’t a tailwind specific thing rather a CSS specific thing.

    • @lukas.webdev
      @lukas.webdev 3 дня назад

      You're absolutely right, Richárd! Thanks for pointing that out - that’s exactly what I meant to convey. 😉 At 2:39 in the video, I clarify that this isn’t a Tailwind-specific behavior and also mention that it can't be used for everything. Hope that was understandable?

    • @nemethricsi
      @nemethricsi 2 дня назад

      @@lukas.webdev Right I've heard that so I should have listened further :)

  • @mohitashliya8750
    @mohitashliya8750 4 дня назад

    I have been using tailwind for almost 2 years now and this group thing is what I learned here thank you Lukas

    • @lukas.webdev
      @lukas.webdev 3 дня назад

      I'm glad I could help and I really appreciate your feedback! 😉

  • @gbkEmilgbk
    @gbkEmilgbk 4 дня назад

    sorry for asking but... eg. in 9:59 what is the difference bietween <h1 className='text-[84px]..." > and <h1 style="font-size: 84px"...> ?

    • @SamarthaRawal-j9z
      @SamarthaRawal-j9z 4 дня назад

      One advantage of class is that we can reuse it instead of editing all h1 tag one by one, and it is best practice to implement to make ur code clean and will be easier to maintain if we have define class And, h1 style will also override the stylesheet so need to be carefull

    • @gbkEmilgbk
      @gbkEmilgbk 4 дня назад

      @@SamarthaRawal-j9z in this case, if you have two <h1> tags then you need to write className='text-[84px]" twice (in each tag) - so you actually cant reuse it. Second: if you use className='text-[84px]" you actally want to override stylesheet - so where is the point of not use "style" directly?

    • @Muhammadkashan-sb7oc
      @Muhammadkashan-sb7oc 4 дня назад

      @@gbkEmilgbk why u are using normal css use tailwind both are same.

    • @IgorPcar
      @IgorPcar 3 дня назад

      ​@@gbkEmilgbkbecause he chose to use the framework, both are the same but one is in css format and the other is in tailwind. If you choose to use tailwind stick to it, mix only when necessary.

    • @gbkEmilgbk
      @gbkEmilgbk 3 дня назад

      @@IgorPcar both are not the same - because tailwind is additional (redundand?) layer of abstraction(?) over CSS

  • @daviddwq4513
    @daviddwq4513 4 дня назад

    Nice! I'm just starting to be familiar with tailwind. As an old school css user, I was a little bit reluctante to use any css framework since I was used to use sass on BEM architecture. But now by developing some apps with React I didn't found sass as useful as used to be. Tailwind is so easy to use I didn't even need to learn it is so intuitive specially if you already master css. However tips like this are gold, thank you!

    • @lukas.webdev
      @lukas.webdev 3 дня назад

      Thanks for your feedback and for sharing a bit of your backstory, David! I really appreciate it. I completely agree - Tailwind’s intuitive nature truly shines when you already have a strong CSS foundation. I’m so glad you found the tips helpful. Best of luck with your projects! 😉

  • @Jakes_juma254-iv1nr
    @Jakes_juma254-iv1nr 4 дня назад

    Great walkthrough Keep up the good work

    • @lukas.webdev
      @lukas.webdev 2 дня назад

      Thank you so much for your feedback, I'm glad you like it! 😉

  • @ZeeshanKhan-s6y
    @ZeeshanKhan-s6y 4 дня назад

    i wanna see you in the next video

  • @akhtarhssn
    @akhtarhssn 4 дня назад

    these are the most basic tailwind tips. I was looking for something better.

    • @maulanahahaha
      @maulanahahaha 4 дня назад

      True. it just pro for him

    • @lukas.webdev
      @lukas.webdev 2 дня назад

      I'm sorry the video didn't meet your expectations! It seems like you're already well-versed in Tailwind CSS, which is quiet impressive. I appreciate your feedback and will work on sharing more advanced content in the future as well. 😉

  • @TedomTafotsiDimitriWilfried
    @TedomTafotsiDimitriWilfried 4 дня назад

    Thank you !🙏

  • @lukas.webdev
    @lukas.webdev 5 дней назад

    *ATTENTION:* In the "Delegate" chapter, I mistakenly mentioned that the classes of the parent elements are inherited by the child elements. That’s not accurate! What I meant to say is that the some styles applied by those classes are inherited, not the classes themselves. Apologies for the confusion! What are your thoughts on this video? Like this comment if you want to see more videos about Tailwind CSS or let me know in the comments, what kind of content you want to see next on this channel.

  • @cturyasiima
    @cturyasiima 5 дней назад

    all i did was just destroy the like button, i really owed it to that stare😂😂

    • @lukas.webdev
      @lukas.webdev День назад

      Awesome! 😄 Thanks, I really appreciate it!

  • @ashwiniguli2070
    @ashwiniguli2070 8 дней назад

    7:20 for plugins related to Tailwind. Btw excellent content and teaching style..Thank you for making it. Please make more videos!

    • @lukas.webdev
      @lukas.webdev День назад

      Thank you so much for your feedback, I'm really glad to hear that! After taking a break of over a year, I just started creating videos again. The last two I posted are all about Tailwind CSS, so they might be interesting to you as well... 😉

  • @codingbyte847
    @codingbyte847 9 дней назад

    Thanks a lot, You saved me🥰

  • @gastonarevalo1237
    @gastonarevalo1237 10 дней назад

    Great tutorial. You cover all the bases!

  • @gauravsonar9872
    @gauravsonar9872 12 дней назад

    Thanks❤

  • @DeejayRobert
    @DeejayRobert 12 дней назад

    Is this guy an AI?

    • @lukas.webdev
      @lukas.webdev День назад

      No, but I get why you might think that! 😄

  • @lukas.webdev
    @lukas.webdev 13 дней назад

    I’m currently working on an affordable, comprehensive course on Tailwind CSS, covering everything from installation to advanced customization. Unlike other courses about this topic - that are way too long and complicated - this one will be straight to the point and efficient - because Tailwind CSS is not so complicated. You’ll get all the essential information in one course. If that sounds interesting, make sure to like this pinned comment! If there’s enough demand, I’ll prioritize the course, and it will be available much sooner. 😉🔥

    • @tryingtobebetterr
      @tryingtobebetterr 13 дней назад

      Thank you for the service to strangers, my brother in humanity. I am a beginner trying to find a way to combine HTML, CSS (tailwind or vanilla), and a little bit of JavaScript but I am having a hard time understanding responsive design and positioning in CSS. I hope your course also addresses those basics of CSS and then shows its implementation in Tailwind. Thank you, really. I have learned a thing or two from you so far.

    • @lukas.webdev
      @lukas.webdev 12 дней назад

      @@tryingtobebetterr Thanks, I am very happy to hear that and I really appreciate your Feedback! Yes, responsive design and positioning will probably also be covered in the course… 😉

  • @elliot_ch
    @elliot_ch 13 дней назад

    Very useful video 🎉

    • @lukas.webdev
      @lukas.webdev День назад

      Thanks, I really appreciate it! 😉

  • @southredmondtoxik1885
    @southredmondtoxik1885 15 дней назад

    Bro I am a desktop first designer. So I wanted to chnage min width to max width. How to do it

  • @tioluwani6928
    @tioluwani6928 16 дней назад

    Great One! Thank you.

    • @lukas.webdev
      @lukas.webdev День назад

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

  • @chicagorealtynow
    @chicagorealtynow 16 дней назад

    Thank you for making this so easy :)

    • @lukas.webdev
      @lukas.webdev День назад

      My pleasure! I’m glad you like it and I appreciate your feedback! :)

  • @yangnina3465
    @yangnina3465 21 день назад

    Amazing vedio. Saved me for three hours.😄

    • @lukas.webdev
      @lukas.webdev День назад

      Awesome! I'm happy to hear that and I appreciate your feedback! 😉

  • @irismaxj
    @irismaxj 24 дня назад

    14:33 the entire customization section is super helpful! Thank you so much Lukas!

  • @edgargill7828
    @edgargill7828 26 дней назад

    it is hard to keep up css classes. and even worst come up with a name. i def agreed on using a framework. i don't care what you say. as someone learning for years!!!!!!! is better to use a framework unless you building a calculator app or clock app or to do app. otherwise. big projects stick to css frameworks. just my 2 cents.

  • @zubairahmed2660
    @zubairahmed2660 29 дней назад

    Amazing video, by watching this video I became your subscriber 😍🥰

  • @MrOnais321
    @MrOnais321 Месяц назад

    amazing video

  • @Octet-1
    @Octet-1 Месяц назад

    Please make more and more on responsive design

  • @foryou_music01
    @foryou_music01 Месяц назад

    Amazing...I Saw All Videos About useState of famous RUclipsrs...but I Understand it through this tutorial ❤ keep it Up Man🤝 Thank You So Much

  • @Manpreetsingharora1
    @Manpreetsingharora1 Месяц назад

    Bro need more videos from you, you explain so well! Hope you will start uploading more content soon.

    • @MiguelDebruyne
      @MiguelDebruyne 25 дней назад

      It's weird that he totally blanked after this video. Seems like he was just getting started. Hope he is doing ok and nothing serious happened.

  • @christopherelizabeth503
    @christopherelizabeth503 Месяц назад

    hey! came here to say that i clicked on this video just to let u know i didn’t watch it bc of the thumbnail! enjoy the engagement! sorry for the retention<3

  • @Mecagothits
    @Mecagothits Месяц назад

    thanks for this is a good video Lukas

  • @Mecagothits
    @Mecagothits Месяц назад

    damn after one year. I guess I was sleeping lol

  • @Mecagothits
    @Mecagothits Месяц назад

    notice he is German ;)

  • @ainaoluwapelumi4935
    @ainaoluwapelumi4935 Месяц назад

    i will love to see more videos on tailwind

    • @lukas.webdev
      @lukas.webdev День назад

      The last two videos I that I just posted are all about Tailwind CSS. 😉 Thanks for your feedback.

  • @leethai98
    @leethai98 Месяц назад

    Hey Lukas, I wanted to thanks to you for this video. It's clean, smooth and very useful. I really appreciate it !!!

    • @lukas.webdev
      @lukas.webdev День назад

      Thank you, this really means a lot to me! I'm happy to hear that and I really appreciate your feedback! 😉

  • @lindawang3008
    @lindawang3008 Месяц назад

    Very clear and concise! Learned a lot in less than half hour! Thank you very much for taking effort to make the tutorial!

    • @lukas.webdev
      @lukas.webdev День назад

      You're welcome, Linda! Thanks for the feedback, I'm glad it was helpful to you! 😉

  • @TonyTran-wv2ov
    @TonyTran-wv2ov Месяц назад

    The best tutorial. In the last few seconds of the video, did you just said "Chao" ? Is that Vietnamese ? 😯

  • @myibmaccount
    @myibmaccount Месяц назад

    great tutorial!! learned a ton.

  • @Jaxonoopiii
    @Jaxonoopiii 2 месяца назад

    Amazing way of teaching 🎉🎉

    • @lukas.webdev
      @lukas.webdev День назад

      Thank you very much, I really appreciate it! 😉

  • @robainscough
    @robainscough 2 месяца назад

    Does tailwind support blazor server?

  • @EvanceSaidi-uy5ol
    @EvanceSaidi-uy5ol 2 месяца назад

    like magic. He said i will wait . i liked the video and then he thank me wow🙂

  • @EmilioAzevedo-nt4mx
    @EmilioAzevedo-nt4mx 2 месяца назад

    when i type rafce on my APP.jsx nothing happens. it only shows "ReadableStreamDefaultController" min 8:28. What have I done wrong?

  • @DwightPoncho-v8q
    @DwightPoncho-v8q 2 месяца назад

    Orn Passage