Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set Default Font Color in Tailwind CSS
Many Tailwind CSS developers struggle to set a default font color, resulting in inconsistent text styling and inefficient workflows due to frequent style overrides. Tailwind provides utility classes to set font colors, helping keep the design consistent without needing custom CSS.
Approaches to Set Default Font Color
Tailwind CSS enables us to set the default font color using the following approaches:
Using The Global Utility
With the Global Utility Class in Tailwind CSS, you can set a default font color by adding a utility class like text-green-700 to the <body> element. This way, all text will automatically use that color.
Syntax:
<body class="text-{color}">
Example
In this example, we use the text-green-700 class to make the default font color of our page green. By applying this class to the body element, all text inside the body will inherit this green color.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<title>
Default font color using Tailwind CSS
</title>
</head>
<body class="text-green-700">
<h1 class="text-8xl font-bold">
Tutorialspoint
</h1>
</body>
</html>
Output
Using the @layer Directive
This method uses the @tailwind directive in a CSS file to style different parts of Tailwind CSS. The @tailwind base directive helps you set basic styles for elements like the HTML and body tags. Here, we will use the @layer directive to add a default font color to the base layer.
Syntax:
@layer base {
html {
@apply text-purple-700;
}
}
Example:
In this example, we change the default font color to pink by using the text-pink-700 class on the HTML element. We do this with the @apply directive inside the @layer base directive.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<title>
Default font color using Tailwind CSS
</title>
</head>
<body class="text-pink-700">
<h1 class="text-8xl font-bold">
Tutorialspoint
</h1>
</body>
</html>
Output
Using a Tailwind CSS Plugin
The tailwind.config.js file is where you can change your Tailwind CSS settings. You usually find this file in the main folder of your project. If you don't have a tailwind.config.js file yet, you can make one by running this command in your terminal.
npx tailwindcss init
And follow the Tailwind CSS Installation Guide.
Customize the Theme
Here are the steps to customize the theme to set a default font color in Tailwind CSS.
- tailwind.config.js: Locate and open your Tailwind CSS configuration file.
- Extend the Theme: Inside the theme object, use the 'extend' property to add custom settings.
- Add textColor Property: Define the 'textColor' property within the 'extend' object.
- Set Default Color: Assign a color value to 'DEFAULT' (e.g., '#4A5568') to set it as the default font color.
- Save Changes: Save the 'tailwind.config.js' file after making the changes.
- Use Default Color: Use text elements in your HTML without specifying a color class to apply the default font color.
// tailwind.config.js
module.exports = {
theme: {
extend: {
textColor: {
DEFAULT: '#4A5568',
},
},
},
plugins: [],
};
Example:
After setting the default font color, you can use it in your HTML without specifying a color class. Here's a simple example.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<title>
Default font color using Tailwind CSS
</title>
</head>
<body class="text-blue-700">
<h1 class="text-8xl font-bold">
Tutorialspoint
</h1>
</body>
</html>
Output
433 Views
