How to set default font color using Tailwind CSS ?

Last Updated : 24 Apr, 2023

Tailwind CSS is a popular utility-first CSS framework that simplifies styling web pages by composing pre-defined CSS classes. While designing web pages, setting a default font color is a common task.

In this article, we’ll explore different ways to set the default font color using Tailwind CSS, which can help you create more visually appealing websites. The different approaches to setting the default font color using Tailwind CSS are discussed below.

Approach 1: Using the global utility: One way to set the default font color using Tailwind CSS is by using the global utility class. This approach allows you to set the default font color for the entire web page using a single class. By applying this class to the body element of the web page, you can ensure that all text on the page inherits the same color.

Syntax:

<body class="text-{color}">

In the syntax, {color} is the name of the color we want to use. For example, to set the default font color to green, we can use the text-green-500 class.

Example: In this example, we’re using the text-green-500 class to set the default font color of our page to green. We’ve applied this class to the body element, which means that all text within the body element will inherit this font color.

HTML

<!-- index.html -->
  
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <script src="https://cdn.tailwindcss.com"></script> 
    <title>Default font color using Tailwind CSS</title> 
</head> 
  
<body class="text-green-500"> 
    <h1 class="text-9xl">GeeksforGeeks</h1> 
</body> 
  
</html>

Output:

Using global utility

Approach 2: Using the @layer Directive: This approach involves using the @tailwind directives in a CSS file to apply styles to specific layers of Tailwind CSS. The @tailwind base directive allows you to define base styles for elements like the HTML and body tags. In this case, we will use the @layer directive to add a default font color to the base layer.

Syntax:

@layer base {
      html {
        @apply text-purple-700;
      }
}

In this example, we use the @layer base directive to add a new style to the base layer. Inside the base layer, we target the HTML element and apply the text-purple-700 class using the @apply directive.

Example: In this example, we set the default font color to purple by adding the text-purple-700 class to the HTML element using the @apply directive within the @layer base directive.

CSS

/* tailwind.css  */
  
@tailwind base; 
@layer base { 
      html { 
        @apply text-purple-700; 
      } 
} 
@tailwind components; 
@tailwind utilities;

HTML

<!-- index.html -->
  
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title>Default font color using Tailwind css</title> 
    <link rel="stylesheet" href="tailwind.css"> 
</head> 
  
<body> 
    <h1 class="text-9xl">GeeksforGeeks</h1> 
</body> 
  
</html>

Output:

Using @layer directive

Approach 3: Using a Tailwind CSS Plugin: This approach involves using a Tailwind CSS plugin to set the default font color. This approach is a bit more advanced, as it involves writing custom code to extend the functionality of Tailwind CSS. Here’s an example of how to set the default font color using a Tailwind CSS plugin:

Syntax:

/* tailwind.config.js */
const plugin = require("tailwindcss/plugin");
module.exports = {
      ...
      plugins: [
        plugin(({ addBase, theme }) => {
              addBase({
                html: { color: theme("colors.red.500") },
              });
        }),
      ],
};

In this example, we’re using the tailwindcss/plugin module to define a custom plugin. The plugin is adding a base style to the HTML element, setting the font color to red.500 color from the Tailwind CSS color palette.

Example: Here’s an example HTML code for the approach using the addBase function in the tailwind.config.js file. This HTML code includes a heading element that will inherit the default font color set in the tailwind.config.js file.

HTML

<!-- index.html -->
  
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title>Default font color using Tailwind css</title> 
    <link rel="stylesheet" href="tailwind.css"> 
</head> 
  
<body> 
    <h1 class="text-9xl">GeeksforGeeks</h1> 
</body> 
  
</html>

Javascript

/* tailwind.config.js */
  
const plugin = require("tailwindcss/plugin"); 
module.exports = { 
    content: ["*"], 
    theme: { 
        extend: {}, 
    }, 
    plugins: [ 
        plugin(({ addBase, theme }) => { 
            addBase({ 
                html: { color: theme("colors.red.500") }, 
            }); 
        }), 
    ], 
};