Tailwind vs Chakra UI Colors – Two utility-first palettes

Consumed mostly via class names: bg-blue-500, text-gray-700, border-emerald-400. Semantics are created by local conventions or theme extensions that alias Tailwind values.

// tailwind.config.js
theme: {
  extend: {
    colors: {
      brand: {
        50: '#eff6ff',
        500: '#3b82f6',
        600: '#2563eb',
      },
    },
  },
}

Consumed via theme tokens (theme.colors.blue[500]) and JSX style props (colorScheme="blue", bg="blue.500"). Semantics are more built-in — especially via colorScheme:

<Button colorScheme="blue">Primary</Button>
<Alert status="error">Something went wrong</Alert>

Chakra components interpret schemes and states into actual palette values automatically. This means its palette is tightly integrated with the component library, whereas Tailwind's palette is framework-agnostic.

Provides a dark: variant for any class. You decide which shades to use in dark mode. There is no separate dark palette; you reuse the same scales with different indices.

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">

Extremely flexible, but requires design decisions for every theme.

Chakra tracks color mode internally via ChakraProvider. Many components automatically adjust. colorScheme="blue" uses different underlying blue shades in light vs dark. You can override via the theme config, but sensible defaults come out of the box.

Colors are pure utility values. To build a design-token layer, define semantic tokens in your app and map them to Tailwind classes or CSS variables:

:root {
  --color-bg: theme('colors.gray.50');
  --color-text: theme('colors.gray.900');
  --color-primary: theme('colors.blue.600');
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}

Chakra starts with a global theme (extendTheme) that includes semantic tokens you can use directly as style props:

const theme = extendTheme({
  semanticTokens: {
    colors: {
      bg: {
        default: 'gray.50',
        _dark: 'gray.900',
      },
      primary: {
        default: 'blue.600',
        _dark: 'blue.300',
      },
    },
  },
})

You can then use bg="bg" or color="primary" directly in JSX. Chakra is closer to a batteries-included design system; Tailwind is a raw palette + utility engine.