TailwindCSS Is Ugly. Here's How To Deal With It.

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 พ.ย. 2024

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

  • @gamingwolf3385
    @gamingwolf3385 5 หลายเดือนก่อน +5

    5:40 you can also use tailwind-merge with clsx for conditional styles ,
    Its a good combo

  • @bioburden
    @bioburden 4 หลายเดือนก่อน +1

    Thanks for quickly explaining cva, I was struggling to know the best way of implementing a design system with Tailwind.

  • @nested9301
    @nested9301 5 หลายเดือนก่อน +6

    I always turn everything into separate components it's the core of react

    • @smoothoperatah
      @smoothoperatah 5 หลายเดือนก่อน +1

      always? everything? that sounds tedious

    • @treyrader
      @treyrader 5 หลายเดือนก่อน

      Only do that if you find yourself needing to reuse the div. I use tw merge and clsx and thn wrap things in the cn() function divided by commas. (eg 'cn("flex", "items-center", "justify-center", {"hidden": !isActive});'. I also use the layer directive and add all my combo classnames, such as "flex-center": "flex items-center justify-center"; It goes a longg way. Used to store the classnames in a separate module but it proved to be difficult to make modifications nor did i get the intellisense.
      I fucking love tailwind so much

  • @sheldonfrith8258
    @sheldonfrith8258 วันที่ผ่านมา

    Good video, Audio is quite hard to hear though, some syllables are super loud followed by super quiet ones

  • @blu_ey
    @blu_ey 5 หลายเดือนก่อน +2

    I use tailwind-variants instead of cva, it has slots and automatically uses twMerge

    • @tomisloading
      @tomisloading  5 หลายเดือนก่อน

      I’ll check that out!

  • @kartikm7
    @kartikm7 5 หลายเดือนก่อน +1

    Great content man, always getting learn something new from here!

  • @joshuadeguzman2911
    @joshuadeguzman2911 5 หลายเดือนก่อน

    I think it would be better to create an array of links if links have similar styles except for active status. It'll make it easier to add new links and style them similarly and could simply highlight the active link.

  • @Dreamslol
    @Dreamslol 5 หลายเดือนก่อน +1

    The buttons look so cute!

  • @victorshirokiy9883
    @victorshirokiy9883 5 หลายเดือนก่อน

    Instead of variants logic, you can define custom classes with {@apply: bg-white text-black ...}

  • @0xAndy
    @0xAndy 5 หลายเดือนก่อน +3

    Love this channel.

    • @tomisloading
      @tomisloading  5 หลายเดือนก่อน +1

      Thank you! 😁

  • @slliks4
    @slliks4 5 หลายเดือนก่อน

    Overriding is still a flex complex thing for me 😅
    I just write CSS code if it Gets too complex

  • @slliks4
    @slliks4 5 หลายเดือนก่อน

    Or repeat in a more fancy way
    Create an array of dic with the link name as a key
    Map through it in your jxs and just style one of the tag

  • @felipefregginrules
    @felipefregginrules 5 หลายเดือนก่อน +1

    Love this!

  • @obasaajibola3933
    @obasaajibola3933 5 หลายเดือนก่อน

    please create an awwwards like preloader animation on your next video with framer-motion and react or nextjs

  • @Howdyhowthis
    @Howdyhowthis 5 หลายเดือนก่อน

    Cant we just do css module and use @component.

  • @daleryanaldover6545
    @daleryanaldover6545 5 หลายเดือนก่อน

    Finally found Tom, the maker of JDSL 😂

  • @ofeklevy1242
    @ofeklevy1242 5 หลายเดือนก่อน +1

    GREAT

  • @ДенисМаценко-м2р
    @ДенисМаценко-м2р 4 หลายเดือนก่อน +1

  • @mattmaloney5988
    @mattmaloney5988 5 หลายเดือนก่อน +1

    Insane that anyone has the time per mental space to deal with this nonsense.

    • @aliventurous
      @aliventurous 4 หลายเดือนก่อน

      How would you deal with it?