Tailwind CSS Palette

Custom color palette generated from #fdf5e6

50#ffffff

100#fffefd

200#fffdfa

300#fffcf8

400#fefbf6

500#fefaf4

600#fefaf1

700#fef9ef

800#fef8ed

900#fdf7eb

950#fdf6e8

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: '#fffefd',
  200: '#fffdfa',
  300: '#fffcf8',
  400: '#fefbf6',
  500: '#fefaf4',
  600: '#fefaf1',
  700: '#fef9ef',
  800: '#fef8ed',
  900: '#fdf7eb',
  950: '#fdf6e8',
},
      },
    },
  },
  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: #fffefd;
--color-custom-200: #fffdfa;
--color-custom-300: #fffcf8;
--color-custom-400: #fefbf6;
--color-custom-500: #fefaf4;
--color-custom-600: #fefaf1;
--color-custom-700: #fef9ef;
--color-custom-800: #fef8ed;
--color-custom-900: #fdf7eb;
--color-custom-950: #fdf6e8;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fffefd

custom-200

#fffdfa

custom-300

#fffcf8

custom-400

#fefbf6

custom-500

#fefaf4

custom-600

#fefaf1

custom-700

#fef9ef

custom-800

#fef8ed

custom-900

#fdf7eb

custom-950

#fdf6e8

Learn more about customizing colors in Tailwind CSS