10 Tailwind tips I wish I knew earlier

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 มิ.ย. 2024
  • Looking to up your Tailwind game? Check out these 10 tips I wish I knew earlier!
    Next video to watch:
    • 5 React UI Libraries Y...
    ⚔️ Join The Horde
    - Discord: / discord
    - Github: github.com/TheOrcDev
    Some of the projects to check:
    Connector: github.com/TheOrcDev/orcish-o...
    AI Framework: github.com/TheOrcDev/orcish-a...
    00:00 Intro
    00:13 Tip 1
    02:00 Tip 2
    03:11 Tip 3
    04:11 Tip 4
    06:31 Tip 5
    07:06 Tip 6
    08:23 Tip 7
    09:00 Tip 8
    10:00 Tip 9
    12:12 Tip 10
    #webdevelopment #orcdev #tailwind #10tips #react #nextjs
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 13

  • @orcdev
    @orcdev  26 วันที่ผ่านมา +4

    Hey Warriors, I hope you enjoyed the video! Don't forget to smash that like button and hit subscribe to join me on my Orcish TH-cam journey!"

  • @bozzhik
    @bozzhik 25 วันที่ผ่านมา +1

    1 tip - you can also use space-x-2 (space-y-2) to not use flex to devide elements
    3 tip - you can use also bg-opacity-40

    • @orcdev
      @orcdev  25 วันที่ผ่านมา

      Yes space-x-2 is also an option!
      bg-opacity-40 is deprecated, if you use it you’re getting a warning to use bg-red-500/40

  • @kafukai
    @kafukai 12 วันที่ผ่านมา

    Great tips, even if I knew all of them ;) If you want another great tip, is to use background images in the tailwind.config file, if you are using svg files it can make your icons much easy to use, you have to only write the shortcut name in the class.
    The Shadecn is new for me, this is why I am following you ;)

    • @orcdev
      @orcdev  12 วันที่ผ่านมา +1

      What do you mean in tailwind config file? To declare images there like components? Somehow I'm always using some icon libraries for those things, like Hero Icons :D
      Thank you very much! I definitely recommend Shadcn!

    • @kafukai
      @kafukai 12 วันที่ผ่านมา

      @@orcdev
      Yes, something like that.
      The code should look like this:
      theme: {
      extend: {
      colors: {
      ....
      },
      backgroundImage: {
      "email-icon": "url('/icons/email.svg')",
      },
      },
      },
      plugins: [],
      },
      Because I am designing my icons, it is the best solution I have found, also no one can download and use them.

    • @orcdev
      @orcdev  12 วันที่ผ่านมา +1

      @@kafukai yeah that’s actually pretty good for custom icons! thanks on that one!

  • @maaritswanderlust
    @maaritswanderlust 23 วันที่ผ่านมา

    Thank you 🎉

    • @orcdev
      @orcdev  23 วันที่ผ่านมา

      You're welcome!

  • @thankuchari
    @thankuchari 24 วันที่ผ่านมา

    Nice video !! I found your channel from youtube shorts

    • @orcdev
      @orcdev  24 วันที่ผ่านมา

      Thank you very much! Appreciate the support! ⚔

  • @adideveloperr
    @adideveloperr 25 วันที่ผ่านมา +2

    more like you don't know css fundamentals

    • @orcdev
      @orcdev  25 วันที่ผ่านมา

      Hey there!
      Why do you think I don’t know css fundamentals?