Making Themes in Next.js Project using TailwindCSS
TailwindCSS, or Tailwind, became a hot topic in front-end development. Tailwind has a unique technique that changes the way we use CSS. Tailwind uses a technique called utility-first which simply means that we only need to modify changes in HTML classes instead of creating or modifying CSS files.
Tailwind doesn’t only change the way we use CSS, it also makes it easier to build highly customizable themes and dark mode support which is the topic in this article.
Set up Tailwind in Next.js Project
To set up Tailwind in your Next.js project I highly recommend you to read the step-by-step configuration from the official Tailwind documentation here.
After successfully setting up the project, replace all the code in the pages/index.js file with the code below
Run and open localhost:3000 in your browser, then it will look like the image below
Configure Theme
We’ll implement the two colors below, the primary color used for the background color, and the label color used for the text color.
To add these colors into Tailwind, we need to change the tailwind.config.js file as follows
Next, to implement the colors above, add the name of the theme that we defined above into the HTML class, here we’ll add bg-primary to the div tag class, and text-label to the h1 tag class.
And if the result is the same as the image below, it means we have successfully implemented the theme in Tailwind, then congratulations!
Bonus: Implementing Dark Theme
Note: I use the macOS operating system while testing this project, which you can easily change the color mode of the OS through System Preferences > General. For other operating systems, please consult their own manuals.
To implement the dark theme, we can simply change the primary and label properties in the tailwind.config.js file as follows
Finally, add dark:bg-primary-dark and dark:text-label-dark into the pages/index.js file as follows
Run and open localhost:3000 in the browser and try turning on dark mode, then it will look like the image below
If the interface above appears in your browser, congratulations we have successfully implemented the dark theme in our Next.js project using Tailwind!
Closing
By using Tailwind we can easily create highly customizable and dark mode support to the website with just a few configurations.
That’s it for this article, if you like this article, don’t forget to clap and share this article with your friends!
See you in the next article, have a nice day!
Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of its modern DevOps practices.
