Tailwind Color Field

A color select field to let editors choose colors connected to your Tailwind config. It reads top-level Tailwind color keys (like blue, red, stone) and stores the full key (e.g. blue-500) for utility use at render time.

What it does

Presents a Payload SelectField with a live swatch for every Tailwind base color.
Stores the chosen token (e.g. blue-500) in the database.
Exposes getColorValue to convert that token to a CSS value on the server.
Ships a script that snapshots Tailwind v4 colors & breakpoints for runtime use.
Provides strict TypeScript types (TailwindColor).

Install

pnpm dlx shadcn@latest add https://p.livog.com/r/tailwind-color-field.json

Code

import { tailwind } from '@/config/tailwind'
import type { SelectField } from 'payload'

export type ColorOption = {
  value: string
  label: string
  color: string
}

export type TailwindColorField = (overrides?: Partial<SelectField>) => SelectField

const tailwindColorField: TailwindColorField = (overrides = {}) => {
  const { admin: adminOverrides, ...restOverrides } = overrides

  const baseField = {
    name: 'color',
    required: false,
    hasMany: false,
    ...restOverrides,
    type: 'select',
    interfaceName: 'TailwindColor',
    options: Object.keys(tailwind.colors).map((key) => ({
      value: key,
      label: key.charAt(0).toUpperCase() + key.slice(1).replace(/-/g, ' ')
    })),
    admin: {
      ...adminOverrides,
      components: {
        ...adminOverrides?.components,
        Field: {
          path: '@/payload/fields/tailwind-color/component#TailwindColorSelect'
        }
      }
    }
  } as SelectField

  return baseField
}

export { tailwindColorField }

Usage

import { tailwindColorField } from '@/payload/fields/tailwind-color'

export const SectionBlock: Block = {
  slug: 'section',
  fields: [
    tailwindColorField({
      name: 'backgroundColor',
      label: 'Background color',
      required: true,
    }),
  ],
}

Reading the value in your component

import type { TailwindColor } from '@payload-types'
import { getColorValue } from '@/payload/fields/tailwind-color/utils'

type Props = {
  backgroundColor: TailwindColor
}

export function SectionWithBackground({ backgroundColor, children }: React.PropsWithChildren<Props>) {
  const bg = getColorValue(backgroundColor)

  return (
    <Section spacing="xsmall" background={bg}>
      {children}
    </Section>
  )
}

Good To Know

Resolve on the server. Call getColorValue only in server‑side code (e.g. inside a React Server Component or an API util) and pass the returned hex/string down to client components. Doing so keeps the full Tailwind color map out of your client bundle.

Generate a resolved Tailwind snapshot. Tailwind v4 no longer exposes resolveConfig, so this package ships with ~/scripts/generate-resolved-tailwind-config.ts as a workaround. The script:

Finds your entry stylesheet containing @import "tailwindcss".
Invokes @tailwindcss/cli build to compile it.
Parses the emitted CSS and extracts the final colors and breakpoints.

Add it to your package.json:

{
  "scripts": {
    "generate:tailwind": "tsx scripts/generate-resolved-tailwind-config.ts"
  }
}

Run the script whenever your Tailwind config or design tokens change (pnpm generate:tailwind). The snapshot powers getColorValue and provides typed breakpoint exports for your app.