Custom themes with TailwindCSS in under 9 minutes

Поделиться
HTML-код
  • Опубликовано: 25 окт 2024

Комментарии • 31

  • @timmyb4204
    @timmyb4204 7 месяцев назад

    This was very well explained and I’ve been looking to do just this very thing! Thank you very much and great work!

  • @alexdin1565
    @alexdin1565 3 месяца назад +1

    bro you must change your channel name to Gold Mine , after 4 months searching on google and youtube you are the only one who save my life thanks
    please can you make more tutorials like this
    you deserve the subscribe and the like

  • @zain_x_alpha
    @zain_x_alpha 7 месяцев назад

    great explanation and clear concepts thanks for it✨

  • @someone.5357
    @someone.5357 3 месяца назад

    amazing tutorial, keep doing these!

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

    Amazing .Great job

  • @jaredmurphy
    @jaredmurphy 6 дней назад

    Helpful!

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

    bro i want to use the primary of tailwind, like bg-primary-100, bg-primary-200, 300 and so forth.
    but i would like that primary color to be dynamic, allow the user to choose between tailwind options, like blue red green indigo cyan etc
    can i do that ?

  • @MyGeorge1964
    @MyGeorge1964 7 месяцев назад

    Ever heard of shadcn/ui? Good explanation of how it works...

    • @builtwithcode
      @builtwithcode  7 месяцев назад

      I'm a fan of shadcn/ui. I've got some videos coming up that'll use it, so stay tuned.

  • @SomjitNag
    @SomjitNag 5 месяцев назад

    any tips for combining this approach with what you showed in the dark-mode video ?

    • @builtwithcode
      @builtwithcode  5 месяцев назад +1

      You can layer them as separate classes on your parent div (e.g., body). Then in the CSS, for each theme define light and dark styles as needed. E.g., .theme-orange {} and .theme-orange.dark {}

  • @kypac99
    @kypac99 7 месяцев назад

    Really useful video

  • @diwang625
    @diwang625 7 месяцев назад

    Really helpful video! By the way, could your tell me how to set up vscode to show the errors on right side of the line like your video?😁

    • @builtwithcode
      @builtwithcode  7 месяцев назад

      I use the "Error Lens" extension in vscode

  • @DanteMishima
    @DanteMishima 7 месяцев назад

    3 days ago.... Pages, thank you!

  • @asadmehboob1300
    @asadmehboob1300 8 месяцев назад

    great video, but 1 question how we will change color if our color exist in db?

    • @Nekoeye
      @Nekoeye 8 месяцев назад

      Get the value from DB, findIndex in the array, and set it as default instead of 0 in useState.

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

    Thanks!

  • @milosvelickovic1414
    @milosvelickovic1414 3 месяца назад

    Can this approach be applied in React, or is it only applicable in Next.js?

    • @builtwithcode
      @builtwithcode  3 месяца назад +1

      Yep this will work in normal React

  • @ThangNguyen-kp1qw
    @ThangNguyen-kp1qw 8 месяцев назад

    Hope you can figure out how to configure font family

    • @builtwithcode
      @builtwithcode  7 месяцев назад

      You can use the exact same technique for fonts. Just setup CSS variables defining the fonts in each theme, and then in the tailwind config override the fonts instead of colors.

  • @풍월상신
    @풍월상신 8 месяцев назад

    I expected :has selector to follow in tailwind configs.

  • @ДенисМаценко-м2р
    @ДенисМаценко-м2р 7 месяцев назад

    Thank you

    • @builtwithcode
      @builtwithcode  7 месяцев назад

      Thanks for stopping by, hope it was helpful

  • @HellBoy-ed4ct
    @HellBoy-ed4ct 26 дней назад +1

    content is good but man very irritating voice

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

    very annoying breaking voice