How to add Color to Tailwind CSS
By Ovuoba Emmanuel
Technical Writer
Tailwind Colors
Tailwind Colors is one of the classes available in Tailwind CSS. Tailwind CSS boasts a lot of default color palettes to choose from for your designs and it also allows one to customize their own colors and use.
Table of Content
- Introduction
- Understanding Tailwind Colors
- Default Tailwind Color Palette
- Tailwind Background Colors
- Tailwind Text Color
- Customizing Colors
- Extending the Default Color palette
- Custom Colors
- Conclusion
Introduction
Tailwind colors allow web designers to create unique and visually appealing web pages. It uses an array of colors to create a consistent, harmonious look and feel across the entire website. It is a great way to create a cohesive design. Tailwind colors also provide a wide variety of colors to choose from, allowing designers to create a unique look.
In this post, you will learn how to use tailwind css colors, to customize the colors and even create your own color Palette.
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."
Default Tailwind Color Palette
Tailwind Colors come with a w ell made color palette for everyone. Even if you don't know the color to use for your project, you can easily start with the ones provided by Tailwind Color palette.
colors.coolGray
colors.red
colors.amber
colors.emerald
colors.blue
colors.indigo
colors.violet
colors.pink
Tailwind Background Colors
We can easily set the Tailwind Background color by using the bg-[color]
, where the [color]
is the name of the color you want applied.
<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.
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
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit, corporis. Deserunt expedita numquam aliquid libero ea.
Eius sapiente quae adipisci tempora consequatur est dolorum praesentium repellat ipsum?
Odit, corporis. Deserunt expedita numquam aliquid libero ea.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit, corporis. Deserunt expedita numquam aliquid libero ea.
Customizing Colors
By default, Tailwind provides a set of basic colors, but you can add your own custom colors under the colors
key in the theme
section of your tailwind.config.js
file.
Here’s an example of how to add a custom color:
// tailwind.config.jsmodule.exports = { theme: { colors: { // Configure your color palette here }, },};
Extending the Default Color palette
If you don't wish to completely override the default colors provided by Tailwind CSS. You can easily extend the color palette in the tailwind.config.js
file. You can do this by using the theme.extend.colors
section found in the file.
// tailwind.config.jsmodule.exports = { theme: { extend: { colors: { 'elegant-green': '#51a868', }, }, },};
This generates bg-elegant-green
along with the other default tailwind colors palette.
As this extension is merged deeply, you can even go ahead to give it a more deeper shade of color.
// tailwind.config.jsmodule.exports = { theme: { extend: { colors: { green: { 250: '#51a868', }, }, }, },};
The configuration above adds a class bg-green-250
, a shade of green to the already existing ones.
Custom Colors
You can of course, change completely the Tailwind default color palette. You can replace them with your own colors.
// tailwind.config.jsmodule.exports = { theme: { colors: { transparent: 'transparent', current: 'currentColor', green: { light: '#79d191', DEFAULT: '#299e49', dark: '#0d6926', }, yellow: { light: '#b7c460', DEFAULT: '#819116', dark: '#768517', }, blue: { dark: '#009eeb', DEFAULT: '#1fb6ff', light: '#85d7ff', }, }, },};
The code above is an example of replacing tailwind colors palette with your own colors.
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.
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.
Related Posts
Comments
...