Custom themes with TailwindCSS in under 9 minutes

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

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

  • @timmyb4204
    @timmyb4204 8 месяцев назад +1

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

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

    great explanation and clear concepts thanks for it✨

  • @alexdin1565
    @alexdin1565 4 месяца назад +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

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

    amazing tutorial, keep doing these!

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

    Helpful!

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

    Amazing .Great job

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

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

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

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

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

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

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

    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 ?

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

    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  8 месяцев назад

      I use the "Error Lens" extension in vscode

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

    Thanks!

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

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

    • @builtwithcode
      @builtwithcode  6 месяцев назад +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 8 месяцев назад

    Really useful video

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

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

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

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

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

    Hope you can figure out how to configure font family

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

      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.

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

    Thank you

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

      Thanks for stopping by, hope it was helpful

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

    I expected :has selector to follow in tailwind configs.

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

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

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

      Yep this will work in normal React

  • @HellBoy-ed4ct
    @HellBoy-ed4ct Месяц назад +1

    content is good but man very irritating voice

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

    very annoying breaking voice