How to rewrite css rules on tailwind css?

by jasen_gottlieb , in category: HTML & CSS , 3 months ago

How to rewrite css rules on tailwind css?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by hal.littel , 3 months ago

@jasen_gottlieb 

In Tailwind CSS, you can easily rewrite CSS rules by customizing the tailwind.config.js file. Here's how you can do it:

  1. Navigate to your project directory and open the tailwind.config.js file.
  2. Inside the file, you'll see a theme object where you can customize the default styling of your website. For example, if you want to change the background color of the body element, you can add the following code:
1
2
3
4
5
6
7
8
9
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-background': '#f9f9f9',
      },
    },
  },
}


  1. Save the file and run the Tailwind CSS build command to apply the changes to your stylesheet. You can do this by running the following command in your terminal:
1
npx tailwindcss build styles.css -o output.css


  1. Your custom styles will now be applied to your website. You can continue customizing the tailwind.config.js file to rewrite more CSS rules as needed.