How to add new colors to tailwind-css and keep the original ones

0 votes

How can I add colors to default scheme? Here is my tailwindcss file.

const { colors: defaultColors } = require('tailwindcss/defaultTheme')

module.exports = {
    "theme": {
        "colors": defaultColors + {
            "custom-yellow": {
                "500": "#EDAE0A",
            }
        },
    },
};
Jun 20, 2022 in CSS by Edureka
• 13,620 points
4,077 views

1 answer to this question.

0 votes

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.

npm init 

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.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Open package.json file and under scripts section, add the below code

“scripts”: {
“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
answered Jun 21, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
1 answer
0 votes
1 answer

How to add border in my clip-path: polygon(); CSS style

Using an SVG Dilation Filter to Add ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
6,801 views
0 votes
1 answer

What is WebKit and how is it related to CSS?

In the CSS syntax for rendering content ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
• 12,690 points
812 views
0 votes
1 answer

I want to create a small square colour filled box in HTML & CSS. And most important - I want to write one line after the box

Try using the square html entity: <div style="color:blue">&a ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
5,740 views
0 votes
0 answers

How to make a back-to-top button using CSS and HTML only?

I want to scroll down and up ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
529 views
0 votes
1 answer

How to switch from tailwind CSS Play CDN to production build?

 you need to use build tools like webpack, Rollup, Vite, ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
• 12,690 points
2,141 views
0 votes
0 answers

How can I specify exactly 600px width in Tailwind CSS?

There are numerous width tools in the ...READ MORE

Aug 19, 2022 in CSS by Edureka
• 13,620 points
737 views
0 votes
1 answer
0 votes
1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
1,043 views
0 votes
1 answer

How to create material design input form using css and bootstrap?

Try with this code. HTML: <div class="main_div"> ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
2,483 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP