Tailwind CSS Palette

Custom color palette generated from #faebd7

50#ffffff

100#fffdfb

200#fefbf8

300#fefaf4

400#fdf8f0

500#fdf6ed

600#fdf4e9

700#fcf2e5

800#fcf0e2

900#fbefde

950#fbeddb

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: '#fffdfb',
  200: '#fefbf8',
  300: '#fefaf4',
  400: '#fdf8f0',
  500: '#fdf6ed',
  600: '#fdf4e9',
  700: '#fcf2e5',
  800: '#fcf0e2',
  900: '#fbefde',
  950: '#fbeddb',
},
      },
    },
  },
  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: #fffdfb;
--color-custom-200: #fefbf8;
--color-custom-300: #fefaf4;
--color-custom-400: #fdf8f0;
--color-custom-500: #fdf6ed;
--color-custom-600: #fdf4e9;
--color-custom-700: #fcf2e5;
--color-custom-800: #fcf0e2;
--color-custom-900: #fbefde;
--color-custom-950: #fbeddb;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fffdfb

custom-200

#fefbf8

custom-300

#fefaf4

custom-400

#fdf8f0

custom-500

#fdf6ed

custom-600

#fdf4e9

custom-700

#fcf2e5

custom-800

#fcf0e2

custom-900

#fbefde

custom-950

#fbeddb

Learn more about customizing colors in Tailwind CSS