Tailwind CSS Colors - Flowbite

Since the Tailwind v4 update the default and recommended way of managing and using colors is with native CSS variables. The color variables from Tailwind CSS can be used to set colors for text elements, borders, backgrounds, focus rings, and more.

Default color palette #

The Flowbite UI library has a carefully selected color pallette to meet aesthetic and accessibility demands and here’s a list of the default colors that are available in our design system and the UI library.

Customize colors #

If you’d like to customize the current colors or introduce new ones you can do so by creating new color variables --color-{name} and this color will be available for all text, background and border colors:

/* input.css file */

@import "tailwindcss";

@plugin "flowbite/plugin";

@source "../node_modules/flowbite";

@theme {
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
}