Tailwind CSS Palette

Custom color palette generated from #ffb6c1

50#ffffff

100#fff8f9

200#fff2f3

300#ffebee

400#ffe5e8

500#ffdee2

600#ffd7dd

700#ffd1d7

800#ffcad2

900#ffc3cc

950#ffbdc6

How to Install

Open your tailwind.config.js file

Locate the configuration file in your project's root directory.

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: '#fff8f9',
  200: '#fff2f3',
  300: '#ffebee',
  400: '#ffe5e8',
  500: '#ffdee2',
  600: '#ffd7dd',
  700: '#ffd1d7',
  800: '#ffcad2',
  900: '#ffc3cc',
  950: '#ffbdc6',
},
      },
    },
  },
  plugins: [],
}

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: #fff8f9;
--color-custom-200: #fff2f3;
--color-custom-300: #ffebee;
--color-custom-400: #ffe5e8;
--color-custom-500: #ffdee2;
--color-custom-600: #ffd7dd;
--color-custom-700: #ffd1d7;
--color-custom-800: #ffcad2;
--color-custom-900: #ffc3cc;
--color-custom-950: #ffbdc6;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fff8f9

custom-200

#fff2f3

custom-300

#ffebee

custom-400

#ffe5e8

custom-500

#ffdee2

custom-600

#ffd7dd

custom-700

#ffd1d7

custom-800

#ffcad2

custom-900

#ffc3cc

custom-950

#ffbdc6

Learn more about customizing colors in Tailwind CSS