How to Create Themes with Tailwind CSS

  • Опубликовано: День назад

    Skies DevSkies Dev
    подписчиков: 719

    Learn how to use CSS variables with Tailwind CSS to create light mode, dark mode, and multiple primary color themes.
    You'll also learn how to use React and Next.js to switch between each theme and use local storage to save his/her theme preferences.
    Chapters
    0:00 Introduction
    0:49 Setting up the project
    1:37 How to create CSS variables to create themes
    6:07 How to use React to switch themes
    15:36 How to save theme preference to local storage
    19:21 Summary
    For copy and pastable code snippets, check out this blog post I wrote to go along with this tutorial.
    www.skies.dev/tailwind-themes
    The starter template:
    github.com/swkeever/nextjs-ta...
    The completed project:
    github.com/swkeever/tailwind-...
    Follow me on Twitter:
    / skies_dev
    #tailwindcss #nextjs

@phil5293
@phil5293

Just what I needed. This is amazing. Thank you.

2 месяца назад
@SkiesDev
@SkiesDev

Glad it helped

2 месяца назад
@dilgarda
@dilgarda

This video helped me a lot, thank you.

Год назад
@SkiesDev +1
@SkiesDev

Glad it helped! Thanks for the feedback.

Год назад
@anahiarguello
@anahiarguello

and I love the tutorial, I hope work on my project

Год назад
@SkiesDev
@SkiesDev

Thanks! Glad you liked it. Good luck with your project. Let me know how it goes.

Год назад
@i701Dev +1
@i701Dev

Damn nice tutorial.

Год назад
@SkiesDev
@SkiesDev

Thank you, I’m glad you liked it.

Год назад
@user-uh1cc9ty5w
@user-uh1cc9ty5w

Thank you!

9 месяцев назад
@268snake
@268snake

why do styles like bg-primary-400 not work? is it something i set up wrong or should i do something else?

11 месяцев назад
@SkiesDev
@SkiesDev

Can you share a small example Gist?

11 месяцев назад
@notfadeaway6617
@notfadeaway6617

i never kned className can use filter method. thanks!

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

👍🏻 it’s a handy way to clean up long strings of classes

4 месяца назад
@augustineonyekachiadmiora9015
@augustineonyekachiadmiora9015

well skies. I'm from Nigeria. what if i wanted to use a color palette to randomly selected. anything colors what then do i do ? in your case you only did an array of three colors const colors = ['green', 'yellow', 'red`'] const modes = ['light', 'dark']

2 месяца назад
@SkiesDev
@SkiesDev

I would probably handle this by defining all the colors you want to support, and use JavaScript to handle randomly selecting from the list of colors you support.

2 месяца назад
@md.mohiulislam6516
@md.mohiulislam6516

why not in config file only for define theme? why you use css variable?

11 месяцев назад
@SkiesDev +1
@SkiesDev

Because using the CSS variables allows you to change the themes dynamically. As far as I know, there's not a way to do this in the Tailwind config alone.

11 месяцев назад
@md.mohiulislam6516
@md.mohiulislam6516

@@SkiesDev what do you mean by dynamicaly? what is dynamic theme changing?

11 месяцев назад
@SkiesDev
@SkiesDev

@@md.mohiulislam6516 Like in the video how I can create buttons that let the user change the theme in the app.

11 месяцев назад

Далее

Let's build iOS 16 in React Native 🤔

3:53:49

Let's build iOS 16 in React Native 🤔

notJust․dev

Просмотров 106 тыс.

Tailwind CSS Dark Mode | React App Theme Switcher

6:33

Tailwind CSS Dark Mode | React App Theme Switcher

Over Clocked

Просмотров 31 тыс.

ВЕНГАЛБИ vs ТАМАЕВ. Последняя Гонка! Конец Асхаба

1:12:10

День 2 | PGL MAJOR RMR EU LCQ | КРИВОЙ ЭФИР

7:00:33

День 2 | PGL MAJOR RMR EU LCQ | КРИВОЙ ЭФИР

SL4M & Counter-Strike

Просмотров 179 тыс.

Top 10 Tips and Tricks with Tailwind CSS

23:45

Top 10 Tips and Tricks with Tailwind CSS

developedbyed

Просмотров 77 тыс.

You’re doing dark mode wrong!

7:54

You’re doing dark mode wrong!

Coding in Public

Просмотров 30 тыс.

My Pro Tailwind Workshop Applied in A Real-World SaaS App

8:50

My Pro Tailwind Workshop Applied in A Real-World SaaS App

simonswiss

Просмотров 7 тыс.

10 Tailwind Tricks You NEED To Know!

10:45

10 Tailwind Tricks You NEED To Know!

Ravi - Perfect Base

Просмотров 223 тыс.

Dark mode with TailwindCSS in under 7 minutes

6:58

Dark mode with TailwindCSS in under 7 minutes

Built With Code

Просмотров 10 тыс.

Tailwind CSS | Dark & Light Theme Switcher

8:54

Tailwind CSS | Dark & Light Theme Switcher

John Komarnicki

Просмотров 53 тыс.

From Figma to Tailwind CSS (Design Process + Code)

1:57:48

From Figma to Tailwind CSS (Design Process + Code)

Lee Robinson

Просмотров 59 тыс.

I WISH I Knew These Tailwind Tips Earlier

9:15

I WISH I Knew These Tailwind Tips Earlier

Theo - t3․gg

Просмотров 147 тыс.

This UI Library is a GAME CHANGER! (Not Lying)

20:48

This UI Library is a GAME CHANGER! (Not Lying)

Harkirat Singh

Просмотров 232 тыс.

The BEST Way to Create Responsive Design with Tailwind CSS (2023)

16:56

The BEST Way to Create Responsive Design with Tailwind CSS (2023)

Lukas | Web Development & Design

Просмотров 78 тыс.

Видеокарты RTX 40 Super в опасности!

0:55

Видеокарты RTX 40 Super в опасности!

ITMania - Сборка ПК

Просмотров 654 тыс.