Tailwind CSS Palette

Custom color palette generated from #fff0f5

50#ffffff

100#fffefe

200#fffcfd

300#fffbfc

400#fffafb

500#fff8fa

600#fff7fa

700#fff5f9

800#fff4f8

900#fff3f7

950#fff1f6

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: '#fffefe',
  200: '#fffcfd',
  300: '#fffbfc',
  400: '#fffafb',
  500: '#fff8fa',
  600: '#fff7fa',
  700: '#fff5f9',
  800: '#fff4f8',
  900: '#fff3f7',
  950: '#fff1f6',
},
      },
    },
  },
  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: #fffefe;
--color-custom-200: #fffcfd;
--color-custom-300: #fffbfc;
--color-custom-400: #fffafb;
--color-custom-500: #fff8fa;
--color-custom-600: #fff7fa;
--color-custom-700: #fff5f9;
--color-custom-800: #fff4f8;
--color-custom-900: #fff3f7;
--color-custom-950: #fff1f6;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fffefe

custom-200

#fffcfd

custom-300

#fffbfc

custom-400

#fffafb

custom-500

#fff8fa

custom-600

#fff7fa

custom-700

#fff5f9

custom-800

#fff4f8

custom-900

#fff3f7

custom-950

#fff1f6

Learn more about customizing colors in Tailwind CSS