Applying Text and Color Utilities in Tailwind CSS

Previously in this course, we covered Understanding the Tailwind CLI to set up a robust development environment. Now that your build process is ready, it's time to dive into the core of visual design: typography and colors.

In Tailwind, you don't write custom CSS rules for every heading or paragraph. Instead, you use utilities—small, single-purpose classes that you compose directly in your HTML. This approach ensures your styling remains consistent and scoped.

Mastering Typography Utilities

Typography is the backbone of any readable interface. Tailwind provides a comprehensive scale for sizing and weight that keeps your designs professional and balanced.

Setting Font Sizes

Tailwind uses a naming convention for font sizes that maps to a scale (e.g., text-sm, text-base, text-2xl). This scale is designed to maintain a consistent visual hierarchy.

HTML
style="color:#808080"><style="color:#4EC9B0">p class="text-sm">Small text for metadatastyle="color:#808080"></style="color:#4EC9B0">p>
style="color:#808080"><style="color:#4EC9B0">p class="text-base">The default body text sizestyle="color:#808080"></style="color:#4EC9B0">p>
style="color:#808080"><style="color:#4EC9B0">h1 class="text-4xl">A large headingstyle="color:#808080"></style="color:#4EC9B0">h1>

Controlling Font Weights

You can adjust the thickness of your text using font-weight utilities, ranging from font-thin to font-black.

HTML
style="color:#808080"><style="color:#4EC9B0">p class="font-light">Light textstyle="color:#808080"></style="color:#4EC9B0">p>
style="color:#808080"><style="color:#4EC9B0">p class="font-medium">Medium weight textstyle="color:#808080"></style="color:#4EC9B0">p>
style="color:#808080"><style="color:#4EC9B0">p class="font-bold">Bold textstyle="color:#808080"></style="color:#4EC9B0">p>

Applying Color Utilities

Color is how we communicate status, hierarchy, and brand identity. Tailwind’s color palette is vast, but applying it is simple: use the text-{color}-{shade} or bg-{color}-{shade} syntax.

Changing Text and Background Colors

To change the color of an element, you append the shade number (e.g., 500 for a standard intensity).

Worked Example: Creating a Feature Card

Let’s combine these concepts into a simple, styled card. This is the first step in building the visual components for our marketing site project.

HTML
style="color:#808080"><style="color:#4EC9B0">div class="bg-white p-6 rounded-lg shadow-md">
  style="color:#808080"><style="color:#4EC9B0">h2 class="text-2xl font-bold text-gray-900">
    Modern Development
  style="color:#808080"></style="color:#4EC9B0">h2>
  style="color:#808080"><style="color:#4EC9B0">p class="text-base font-normal text-gray-600 mt-2">
    Build faster with utility-first styling.
  style="color:#808080"></style="color:#4EC9B0">p>
style="color:#808080"></style="color:#4EC9B0">div>

In this example, we’ve used:

1. bg-white to set the background.
2. text-2xl and font-bold for the heading size and weight.
3. text-gray-900 for high-contrast heading text.
4. text-gray-600 for slightly softer, readable body text.

Hands-on Exercise

Create a new HTML file (or use your existing project file) and replicate the card above. Once you've rendered it:

1. Change the background of the card to bg-blue-50.
2. Update the heading color to text-blue-900.
3. Try changing the font weight of the paragraph to font-semibold.

Common Pitfalls

• Ignoring the Scale: Don't try to guess font sizes in pixels. Stick to the text-sm through text-9xl scale to keep your design consistent.
• Low Contrast: Avoid using light colors (like text-gray-300) for body text. Always ensure your text has enough contrast against the background for accessibility.
• Over-styling: You don't need to apply every utility. If a default font size or weight works, let it be. Only add classes when you need to override the default.

FAQ

Q: Can I use custom colors not in the default palette? A: Yes, later in this course we will cover customizing the theme, where you can add your own brand colors to the configuration.

Q: Why does my text look too thin? A: Check if you have a font-light or font-thin class applied. If you want a standard look, remove the weight utility entirely to revert to the default (usually font-normal).

Recap

You’ve now learned how to apply typography and colors using Tailwind's styling utilities. You can control the visual hierarchy of your page by manipulating font size, weight, and color, which is essential for building a polished marketing site.

Up next: Mastering Spacing and Sizing