50#ffffff
100#f1fff4
200#e3ffe8
300#d5ffdd
400#c5ffd1
500#b6ffc6
600#a5ffba
700#93ffae
800#7fffa3
900#67ff97
950#48ff8b
How to Install
1
Open your tailwind.config.js file
Locate the configuration file in your project's root directory.
2
Add the color palette to your theme
Copy the following configuration into your theme's colors section:
module.exports = {
theme: {
extend: {
colors: {
custom: {
50: '#ffffff',
100: '#f1fff4',
200: '#e3ffe8',
300: '#d5ffdd',
400: '#c5ffd1',
500: '#b6ffc6',
600: '#a5ffba',
700: '#93ffae',
800: '#7fffa3',
900: '#67ff97',
950: '#48ff8b',
},
},
},
},
plugins: [],
}3
Use the colors in your HTML/JSX
You can now use your custom colors with Tailwind utility classes:
<!-- Background color -->
<div class="bg-custom-500">...</div>
<!-- Text color -->
<p class="text-custom-700">...</p>
<!-- Border color -->
<div class="border-custom-300">...</div>
<!-- Hover states -->
<button class="bg-custom-500 hover:bg-custom-600">...</button>Alternative: CSS Variables
If you prefer using CSS custom properties, here are the variables:
:root {
--color-custom-50: #ffffff;
--color-custom-100: #f1fff4;
--color-custom-200: #e3ffe8;
--color-custom-300: #d5ffdd;
--color-custom-400: #c5ffd1;
--color-custom-500: #b6ffc6;
--color-custom-600: #a5ffba;
--color-custom-700: #93ffae;
--color-custom-800: #7fffa3;
--color-custom-900: #67ff97;
--color-custom-950: #48ff8b;
}Individual Color Values
custom-50
#ffffff
custom-100
#f1fff4
custom-200
#e3ffe8
custom-300
#d5ffdd
custom-400
#c5ffd1
custom-500
#b6ffc6
custom-600
#a5ffba
custom-700
#93ffae
custom-800
#7fffa3
custom-900
#67ff97
custom-950
#48ff8b
Learn more about customizing colors in Tailwind CSS