Tailwind Colors

Adding Tailwind colors to your project is an effortless way to elevate your design and create a captivating user experience. In this article, we will explore the diverse range of Tailwind CSS colors available and guide you on incorporating your own custom colors into Tailwind CSS for your project.

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 CSS provides a built-in color system, offering a diverse range of colors. Each color comes with a series of shades for variation. The naming convention follows a simple {color}-{number} pattern, where {color} represents the base color (e.g., "red"). {number} indicates the shade, with "500" being the base shade, followed by darker shades like "red-600," "red-700," and lighter shades like "red-400," "red-300."

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

After installing tailwindcss, tailwind default colors will be available for you to use.

Default Tailwind Color Palette

Tailwind CSS offers a comprehensive range of colors to choose from for your project. Tailwind CSS comes with an appealing default color palette right out of the box, ensuring your designs look impressive. Take a look at some of the default Tailwind colors you can experiment with:

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

Step 1: 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.