How to handle colors in Next.js 14 with Tailwind CSS?

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.

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