I am developing a product application using Next.js 14 and Shadcn with Tailwind CSS. I want to know the best approach to handling colors in my project. Since this is a product, I want to ensure that colors are managed efficiently. Currently, I am using inline styles for colors, as shown below.

 <div className="bg-gray-200 rounded-lg mt-5 text-sm">

Can anyone tell me the standard way to manage colors easily, especially if the product's color scheme changes? I am new to Next.js. In the future, I hope to make changes for dark mode as well.

I am developing a product application using Next.js 14 and Shadcn with Tailwind CSS. I want to know the best approach to handling colors in my project. Since this is a product, I want to ensure that colors are managed efficiently. Currently, I am using inline styles for colors, as shown below.

 <div className="bg-gray-200 rounded-lg mt-5 text-sm">

Can anyone tell me the standard way to manage colors easily, especially if the product's color scheme changes? I am new to Next.js. In the future, I hope to make changes for dark mode as well.

• next.js
• tailwind-css
• nextjs14
• shadcnui

2 Answers 2

Not sure what you mean by "best approach to handling colors". If you want to apply custom colors you would extend them through a theme, such as:

// tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        colors: {
          'custom-color':'#001122',
        }
      },
    },  
  }

or if you want just set colors do something like:

theme: {
  extend: {
    colors: {
      'primary': '#000',
      'secoondary': '#111',
    }
  },
},

then you'd use the color for example with changing the text color it be

<p class="text-primary">foobar</p>

or like in your example it would be:

<div className="bg-primary rounded-lg mt-5 text-sm">

or

<div className="bg-custom-color rounded-lg mt-5 text-sm">

if you dont want to use the default colors you can override them in the config:

• Customizing your theme

Have you considered theme variables?

https://tailwindcss/docs/theme

You should be able to define your colour scheme as variables and then reference your theme variables. Should you want to change your colour scheme, it should all be centralised in this one place.

In a .css file you can put

@import "tailwindcss";
@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

and then when you want to reference your colours you can use

<div style="background-color: var(--color-mint-500)">
  <!-- ... -->
</div>