How to set default color for text in Tailwind

In Tailwind CSS, setting the default text color is commonly achieved through the configuration file (tailwind.config.js). You can specify your desired default color in this file and use it throughout the project. Here are the steps and examples for setting the default text color:

Step 1: Open or create the tailwind.config.js file

First, ensure your project has a tailwind.config.js file. If not, create one by running the npx tailwindcss init command.

Step 2: Configure the default color

In the tailwind.config.js file, extend the default theme configuration. To set the text color, add your default color under the extend object's colors property.

javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        // Set the default text color to a gray shade
        'gray': '#333',
      }
    }
  }
}

Step 3: Use the custom color

After configuring the file, apply this color class in your HTML or other template files. For example:

html
<p class="text-gray">This is default gray text</p>

Example Project

Assume a simple web project where text needs to be uniformly set to gray. After the above settings in tailwind.config.js, all text elements using the text-gray class will apply this color.

Note that 'gray' is just an example; define different color names and values based on your requirements. Additionally, set other default styles in the configuration file, such as font size and line height, to achieve a more consistent and professional visual appearance.