Tailwind Colors

Tailwind’s color system is one of those things that feels simple at first, then becomes second nature once you’ve used it for a week. The defaults cover most UI work, the naming is predictable, and when you need your own brand colors, extending the palette is painless. If you’ve ever wrestled with inconsistent design or a messy SCSS variables file, Tailwind is a breath of fresh air.

Here’s a breakdown of how Tailwind handles colors and how you can make the system work for your own project, not just in theory, but in real day-to-day UI building.

Table of content

• Understanding Tailwind Colors
• Integrating Tailwind CSS Colors
• Default Tailwind colors Palette
• Applying Tailwind Background color
• Applying Tailwind Text Color
• Customizing Tailwind Colors
• Conclusion

Understanding Tailwind Colors

Tailwind uses a very straightforward color structure: color-shade. Example: red-500.

If you’ve used design systems like Material or Chakra, the pattern will feel familiar. Lighter values sit around 50–200, the “base” sits at 500, and darker shades go up from there. Once you memorize that rhythm, it becomes easy to map UI elements to classes without checking the docs every two minutes.

It also means components stay predictable, your bg-blue-500 always feels like the same “blue” across your entire project. There’s no guessing.

Integrating Tailwind CSS Colors

Installing Tailwind CSS To get started, you need to install Tailwind CSS. Open your project's terminal and run the following command:

npm install tailwindcss

That’s it, you instantly have access to the full palette. No extra configuration needed unless you want custom colors.

Default Tailwind Color Palette

Tailwind’s default palette is opinionated in a good way. The grays are actually usable for UI surfaces (not too blue, not too brown), the functional colors (red, green, yellow) have shades tuned for alerts, badges, buttons, etc., and you get enough variety for most products without drowning in options.

If you’re building a full design system, you’ll appreciate how consistent the shading is.

Applying Tailwind Background Colors

Tailwind CSS also offers a variety of utility classes for setting background colors. You can use the bg-{color} classes to apply background colors to different elements. For example, the bg-yellow-200 class sets the background color of an element to a light yellow shade, while the bg-gray-800 class applies a dark gray background color. By using these classes in conjunction with other utility classes, such as hover:bg-{color} for hover effects, you can create engaging and interactive user interfaces.

<div class="relative rounded-xl overflow-auto p-8">
	<div
		class="flex flex-col gap-4 font-mono text-white text-sm text-center font-extrabold leading-6 bg-stripes-fuchsia rounded-lg"
	>
		<button class="bg-green-500 rounded-lg p-3">Green</button>
		<button class="bg-purple-500 rounded-lg p-3">Purple</button>
		<button class="bg-blue-500 rounded-lg p-3">Blue</button>
		<button class="bg-yellow-500 rounded-lg p-3">Yellow</button>
		<button class="bg-red-500 rounded-lg p-3">Red</button>
		<button class="bg-pink-500 rounded-lg p-3">Pink</button>
	</div>
</div>

The Tailwind Background colors are shown below.

Preview

Applying Tailwind Text Color

We can easily set the Tailwind colors text by using the text-[name], where the [name] represent the color name.

<div class="relative rounded-xl overflow-auto p-8">
	<div
		class="flex flex-col gap-4 font-mono text-white text-sm text-center font-extrabold leading-6 rounded-lg"
	>
		<p class="text-green-500 p-3">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
		<p class="text-purple-500 rounded-lg p-3">
			Odit, corporis. Deserunt expedita numquam aliquid libero ea.
		</p>
		<p class="text-blue-500 p-3">
			Eius sapiente quae adipisci tempora consequatur est dolorum praesentium
			repellat ipsum?
		</p>
		<p class="text-yellow-500 rounded-lg p-3">
			Odit, corporis. Deserunt expedita numquam aliquid libero ea.
		</p>
		<p class="text-red-500 p-3">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</p>
		<p class="text-pink-500 p-3">
			Odit, corporis. Deserunt expedita numquam aliquid libero ea.
		</p>
	</div>
</div>

The Tailwind colors text Utilities

Preview

Customizing Tailwind Colors

This is where Tailwind becomes more than a utility framework. If you're building anything with branding, you’ll want custom colors.

Step 1: Generate Configuration After installing Tailwind CSS, you'll need to create a configuration file. Run this command:

npx tailwindcss init

This command generates a tailwind.config.js file where you can customize your project's color palette.

Step 2: Customizing Colors

Open the tailwind.config.js file and customize or create your desired colors within the theme.extend.colors section, as shown below:

Code:

/** @type {import('tailwindcss').Config} */
export default {
	theme: {
		extend: {
			// ...
			colors: {
				primary: {
					blue: "hsl(237, 63%, 64%)",
					"very-light": "hsl(240,78%, 98%)",
					light: "hsl(234, 14%,74%)",
					normal: "hsl(23, 13%, 33%)",
					dark: "hsl(232,13%,33%)",
				},
			},
		},
	},
	plugins: [],
};

In the code snippet above, we have added a custom color palette under the colors section. You can define various shades and hues for each color. Feel free to adjust the values according to your preferences.

Step 3: Compile and Build the Styles

After configuring the tailwind.config.js file, you need to compile and build the styles to generate the customized Tailwind CSS file. Execute the following command in your terminal:

Code:

npx tailwindcss build styles.css –o styles/tailwind.css.

This command compiles the styles and outputs the resulting CSS file in the styles/tailwind.css directory.

To showcase the custom colors, let's create a Tailwind colors project and add the following code snippet to an HTML file:

<div class="grid  gap-2 items-center justify-center">
	<div
		class="flex h-28 w-28 items-center justify-center rounded-lg  bg-primary-blue m-4"
	>
		<p class="text-primary-very-light">Custom color</p>
	</div>
</div>

Our webpage should look like the image

Conclusion

With Tailwind colors, you can effortlessly incorporate different colors into your projects using Tailwind CSS. You have flexibility to work with the default palette or define your own colors. Tailwind CSS simplifies the process of adding visual appeal to your web applications. To master Tailwind color, try experimenting with various hues and shades in your projects.