React Series #05: How to change primary and secondary color in Next.js Tailwind projects.

Ramachandran S · 16 August 2024 · Updated 16 August 2024

Tailwind has quite a few color options, here is a basic introduction to how Tailwind uses color followed by how to edit the basic color.

How to use color in Tailwind

Open tailwind.config.js and edit

        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },

Change this to

        primary: {
          DEFAULT: "#36BA98",
          foreground: "hsl(var(--primary-foreground))",
        },

How to use primary color in the project

simple use

<div className="bg-primary">....</div>

That is how you update your project color and use it across your project.