50#ffffff
100#f1fdfb
200#e3faf6
300#d5f7f2
400#c7f5ee
500#b8f2e9
600#a8efe5
700#98ece1
800#86e9dd
900#73e6d8
950#5de3d4
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: '#f1fdfb',
200: '#e3faf6',
300: '#d5f7f2',
400: '#c7f5ee',
500: '#b8f2e9',
600: '#a8efe5',
700: '#98ece1',
800: '#86e9dd',
900: '#73e6d8',
950: '#5de3d4',
},
},
},
},
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: #f1fdfb;
--color-custom-200: #e3faf6;
--color-custom-300: #d5f7f2;
--color-custom-400: #c7f5ee;
--color-custom-500: #b8f2e9;
--color-custom-600: #a8efe5;
--color-custom-700: #98ece1;
--color-custom-800: #86e9dd;
--color-custom-900: #73e6d8;
--color-custom-950: #5de3d4;
}Individual Color Values
custom-50
#ffffff
custom-100
#f1fdfb
custom-200
#e3faf6
custom-300
#d5f7f2
custom-400
#c7f5ee
custom-500
#b8f2e9
custom-600
#a8efe5
custom-700
#98ece1
custom-800
#86e9dd
custom-900
#73e6d8
custom-950
#5de3d4
Learn more about customizing colors in Tailwind CSS