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 in CSS by Edureka
• 8,060 points
5 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 by Edureka
• 9,540 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 in CSS by Edureka
• 9,540 points
7 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 in CSS by Edureka
• 9,540 points
5 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 2 days ago in CSS by Edureka
• 9,540 points
4 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

18 hours ago in CSS by Edureka
• 8,060 points
5 views
0 votes
0 answers

How to include bootstrap css and js in reactjs app?

I want to incorporate bootstrap into my ...READ MORE

18 hours ago in CSS by Edureka
• 8,060 points
6 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28 in CSS by Edureka
• 9,540 points
25 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 in CSS by Edureka
• 9,540 points
7 views
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 in CSS by Edureka
• 9,540 points
33 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 in CSS by Edureka
• 9,540 points
21 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP