Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Use Tailwind Text Color for Great User Engagement

The color of an element plays a crucial role in web development, as it enhances the mood and engagement of website users. In this article, we will discuss text colors in Tailwind CSS and how to use them in your project.

What is a Text in HTML?

Text is the most fundamental part of any HTML document. Developers define text as the meaningful content written within tags to display human-readable content on a web page.

We can write text within HTML tags, like <p>, <span>, and <h1>, etc. as shown above. We can also style tags using Tailwind CSS to control the text color customization.

Importance of text color in web design

The text color we choose on a web page holds great importance in web design. We’ll outline some of those reasons now:

Readability

Certain text colors are more readable than other text depending on the background color of the page i.e. Dark colors on light backgrounds and vice versa are most readable as shown below.

Emphasis

Using different text colors can emphasize important information, headings, links, etc., and help guide the user’s eyes as shown below.

Accessibility

Some users may have trouble reading certain text colors due to visual impairments. Using sufficient color contrast between text and background is important for accessibility as shown below.

Conveying Information

Text color can sometimes convey additional information at a glance. For example, red for negative information, green for positive, etc.

Branding

A consistent text color can be part of a website’s brand identity and color palette. This is because It helps users recognize the website instantly.

Aesthetics

The color of the text, along with the background color, contributes to the overall visual aesthetics and appeal of the web design.

Mood

Text colors can convey a certain mood or tone for the website. Light, bright colors may feel more fun and lively while dark colors may feel more serious and professional. You can also improve your customer experience by improving just your text colors. You can customize just your text colors using the textColors section in Tailwind config.

Subscribe now to receive alerts when Purecode takes off. Unleash the power of our AI assistant to produce countless responsive custom-designed HTML, CSS, Tailwind, and JS components, all adaptable to your brand.

You can learn more about the importance of colors to the consumer from the YouTube video tutorial below:

What are Tailwind Color Pallets?

The default Tailwind Color palettes boast a diverse range of over 20 colors, each accompanied by various shades that cater to different design needs and preferences. Tailwind systematically organized the shades, as illustrated below. As a result, designers effortlessly pick the perfect color combinations for their projects while maintaining a consistent and harmonious visual appearance

Applying text colors in Tailwind CSS

Applying colors to text in Tailwind CSS is relatively simple. Here is the syntax for applying the default colors in Tailwind CSS to text:

{property}-{color}-{shade} i.e <!-- text-gray-900 -->

Where:

Syntax

Description

property

is either bg for background color or text for text color.

color

is the name of the color from Tailwind’s palette. For example: blue, gray, green, yellow, etc.

shade

is an optional numeric value from 50 to 950 representing the shade of that color. 50 is the lightest and 950 is the darkest.

By utilizing this syntax, you can effortlessly customize the appearance of your text, ensuring that it aligns with the overall design and tone of your project. Whether you’re aiming for a playful and energetic vibe or a more somber and professional atmosphere, Tailwind CSS’s predefined color palettes provide the versatility and ease of use necessary to achieve your desired aesthetic.

Examples: Using text color classes

Some examples of Tailwind text color classes are:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="text-blue-500">text-blue-500</h1>
    <h1 class="text-red-700">text-red-700</h1>
    <h1 class="text-gray-100">text-gray-100</h1>
  </body>
</html>

Below is the output of the above text color utilities.

Examples: Using text background color classes

Some examples of Tailwind text background color classes are:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
<h1 class="bg-blue-500">bg-blue-500</h1>
<h1 class="bg-red-700">bg-red-700</h1>
<h1 class="bg-gray-100">bg-gray-100</h1>
  </body>
</html>

Below is the output of the above text background color utilities.

There are other text properties including text transparent color, inherit, and current, you can learn more from here.

Tailwind Theme Color

In Tailwind CSS, we have the capability to precisely control the color of text in response to varying themes—commonly a light theme and a dark theme. To illustrate this concept, let’s consider the code snippet below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
    <script src="https://cdn.tailwindcss.com"></script>

    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              clifford: "#da373d",
            },
          },
        },
      };

      const toggleTheme = () => {
        const body = document.getElementById("body");
        body.classList.toggle("dark");
      };
    </script>
  </head>
  <body class="dark" id="body">
    <main class="min-h-screen bg-slate-50 dark:bg-black">
      <section class="max-w-lg mx-auto p-5">
        <h1 class="text-slate-700 dark:text-slate-100">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime et
          repudiandae autem, dolorem libero officiis accusantium! Deserunt
          voluptas optio magni cum magnam quick brown fox jumped pariatur recusandae aspernatur,
          assumenda beatae, lazy dog ipsam aliquam nisi.
        </h1>
        <button
          onclick="toggleTheme()"
          class="rounded px-2 py-1 mt-3 text-slate-100 bg-slate-900"
        >
          Toggle theme
        </button>
      </section>
    </main>
  </body>
</html>

Code Explanation

In the code snippet above, we’re customizing the appearance of text in both light and dark themes. This is a common practice when implementing a dark mode feature for a website. Here’s how it works:

  1. Tailwind Configuration: The code begins by configuring Tailwind CSS to enable a dark mode. Specifically, we set dark mode: “class” in the tailwind.config script. This means that we can control dark mode by adding or removing the “dark” class from HTML elements, primarily the body.
  2. Toggling Dark Mode: The toggleTheme() JavaScript function is responsible for toggling the dark mode. When called, it toggles the “dark” class on the body element. This class controls the applied styles, depending on whether dark mode is active.
  3. HTML Structure: The body element starts with the “dark” class. This indicates that the dark mode is initially enabled.
  4. Text Color Customization: In the h1 element within the HTML body, you’ll notice the use of Tailwind CSS utility classes to set the text color:

    • class=”text-slate-700″: In light mode, the text color is set to “text-slate-700”. This class results in a specific color for the text.

    • dark:text-slate-100: In dark mode, the text color is set to “dark:text-slate-100”. This class ensures that when dark mode is active, the text color changes to a different shade.

  5. Toggle Theme Button: The “Toggle theme” button is a user interface element that, when clicked, invokes the toggleTheme() function. This effectively switches the website between light and dark modes.

By utilizing this approach, the code demonstrates a flexible and dynamic way of managing text colors. It ensures that text is both visually appealing and readable in different theme settings, making it a valuable feature for improving user experience.

Below is a demonstration of the theme toggle implementation as shown above.

Text Hover State

In Tailwind CSS, we can enhance the interactivity and visual appeal of our web pages by changing the color of the text when the mouse hovers over it. This provides a dynamic and engaging user experience. To demonstrate this concept, let’s refer to the following code snippet:

In the code above, when you hover over the text within the <h1> element, it exhibits two distinct color changes.

In a light theme, the text turns red when hovered over, as defined by hover:text-red-600 while in the dark theme, it transitions to green on hover, specified by dark:hover:text-green-600.

This customizing method for hover states adds a dynamic touch to your webpage. You can tailor this to suit your design preferences.

Tools for checking accessibility

Below are some valuable tools and websites for checking and enhancing your website’s accessibility.

Wave Webaim

Wave is a web accessibility evaluation tool provided by WebAIM. It’s available as a browser extension for Chrome and Firefox, allowing you to test web content directly from your browser.

Pa11y

Pa11y is an automated accessibility testing used for single pages or large websites. It’s available as a command-line tool, but there are also graphical interfaces available for it.

Color Contrast Checkers by WebAIM

For checking an element’s text color contrast, you can use tools like Contrast Checker by WebAIM.

Lighthouse

Lighthouse is an open-source tool from Google that integrates into Chrome DevTools. It includes an accessibility audit that can help identify common accessibility issues.

Adding custom colors

Tailwind CSS allows developers to specify arbitrary (custom) color values for text utility classes. This means that the Tailwind text color utility is not the only limiting factor.

Given the example below, we’re setting a custom color of #13D286 to our text:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <p class="text-[#13D286] text-center">
      Welcome to my website👋🏽, enjoy your stay here 😃
    </p>
  </body>
</html>

The output of the above code is as follows:

This method is not limited to text color alone, it can be used to modify the default line height of a text as well. Another method of personalizing Tailwind colors is by editing theme colors in your project config file.

Semantic Meaning of Colors

Colors can have various semantic meanings and associations depending on cultural, historical, and personal contexts. Here are some common semantic associations with colors:

Red:

Love and Passion: Red is often associated with love, passion, and strong emotions.

Energy and Power: It represents energy, power, and vitality.

Danger and Warning: Red is used as a warning or danger signal in many cultures.

Blue:

Trust and Serenity: Blue is associated with trust, reliability, and calmness.

Wisdom and Intelligence: It’s often linked to intelligence and wisdom.

Dependability: Many corporate logos use blue to convey reliability and professionalism.

Green:

Nature and Growth: Green is strongly associated with nature, growth, and the environment.

Health and Well-being: It’s linked to health and well-being.

Money and Finance: Green is commonly associated with money and financial matters.

Yellow:

Happiness and Positivity: Yellow is often linked to happiness, positivity, and joy.

Energy and Creativity: It represents energy and creativity.

Caution: Yellow is used in warning signs to indicate caution.

Purple:

Royalty and Luxury: Purple has a historical association with royalty and luxury.

Creativity and Imagination: It’s often associated with creativity and imagination.

Spirituality: Purple is linked to spirituality and mysticism.

Orange:

Energy and Enthusiasm: Orange represents energy, enthusiasm, and excitement.

Warmth and Vitality: It’s associated with warmth and vitality.

Affordability: Orange can also be associated with affordability and good value.

Black:

Elegance and Sophistication: Black is often seen as elegant and sophisticated.

Mystery and Power: It can represent mystery and power.

Formality: Black is commonly used in formal attire and events.

White:

Purity and Innocence: White is associated with purity, innocence, and cleanliness.

Peace and Simplicity: It represents peace and simplicity.

Safety: White is often used to indicate safety and neutrality.

Pink:

Femininity and Romance: Pink is often linked to femininity, romance, and love.

Compassion and Care: It represents compassion and care.

Youthfulness: Pink is associated with youth and playfulness.

Brown:

Earth and Nature: Brown is associated with the earth, nature, and stability.

Warmth and Reliability: It represents warmth and reliability.

Rustic and Vintage: Brown is often used in rustic and vintage aesthetics.

Use Tailwind Text Colors Like a Pro

In conclusion, text colors play a significant role in web design, impacting readability, emphasis, accessibility, branding, aesthetics, and mood.

Tailwind CSS offers a versatile and easy-to-use approach for managing text colors, including default palettes, custom colors, theme-based colors, and hover states.

By understanding the importance of text colors and leveraging the power of Tailwind CSS, you can create visually appealing and accessible web pages that enhance user experience.

You can learn more about the Tailwind CSS color customization from the YouTube video below:

Be the first to know about our launch!

Sign up to be notified when Purecode launches. Generate thousands of responsive custom-styled HTML, CSS, Tailwind, and JS components with our AI assistant and customize them to match your brand.

Ayodele Samuel Adebayo

Ayodele Samuel Adebayo