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 Tailwind CSS, 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:
Default Tailwind Color Palette
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:
/** @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:
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.