You can easily add new colors to Tailwind CSS and keep the originals ones using customization configuration. You can configure your colors under the colors key in the theme section of your tailwind.config.js file.
Follow the below step to add the tailwind.config.js file in your folder.
Step 1: Run the below code to your folder’s terminal. This will create a package.json file.
Step 2: Copy and paste the below code to your folder’s terminal. This will create the required node module for tailwind.
npm install tailwindcss@latest postcss@latest autoprefixer@latest
Step 3: Create a public folder and add index.html, style.css, and tailwind.css inside the public folder.
Step 4: Add the below code in the tailwind.css file. Using this file you can customize your tailwind CSS along with the default style. Tailwind will swap these directives out at build-time with all the styles it generates based on your configured design system.
Step 5: Open package.json file and under scripts section, add the below code
“build:css”: “tailwind build public/tailwind.css -o public/style.css”
Step 6: Run the below code in the terminal. This will populate your style.css file with predefined Tailwind CSS code.
npm run build:css
Step 7: Finally, run the below code. This will generate a Tailwind config file for your project using the Tailwind CLI utility included at the time of installation of the tailwindcss npm package.
npx tailwindcss init