Configuration snippet to use PayloadCMS colors in Payload
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'base': {
0: 'var(--theme-base-0)',
50: 'var(--theme-base-50)',
100: 'var(--theme-base-100)',
150: 'var(--theme-base-150)',
200: 'var(--theme-base-200)',
250: 'var(--theme-base-250)',
300: 'var(--theme-base-300)',
350: 'var(--theme-base-350)',
400: 'var(--theme-base-400)',
450: 'var(--theme-base-450)',
500: 'var(--theme-base-500)',
550: 'var(--theme-base-550)',
600: 'var(--theme-base-600)',
650: 'var(--theme-base-650)',
700: 'var(--theme-base-700)',
750: 'var(--theme-base-750)',
800: 'var(--theme-base-800)',
850: 'var(--theme-base-850)',
900: 'var(--theme-base-900)',
950: 'var(--theme-base-950)',
},
'success': {
0: 'var(--theme-success-0)',
50: 'var(--theme-success-50)',
100: 'var(--theme-success-100)',
150: 'var(--theme-success-150)',
200: 'var(--theme-success-200)',
250: 'var(--theme-success-250)',
300: 'var(--theme-success-300)',
350: 'var(--theme-success-350)',
400: 'var(--theme-success-400)',
450: 'var(--theme-success-450)',
500: 'var(--theme-success-500)',
550: 'var(--theme-success-550)',
600: 'var(--theme-success-600)',
650: 'var(--theme-success-650)',
700: 'var(--theme-success-700)',
750: 'var(--theme-success-750)',
800: 'var(--theme-success-800)',
850: 'var(--theme-success-850)',
900: 'var(--theme-success-900)',
950: 'var(--theme-success-950)',
},
'warning': {
0: 'var(--theme-warning-0)',
50: 'var(--theme-warning-50)',
100: 'var(--theme-warning-100)',
150: 'var(--theme-warning-150)',
200: 'var(--theme-warning-200)',
250: 'var(--theme-warning-250)',
300: 'var(--theme-warning-300)',
350: 'var(--theme-warning-350)',
400: 'var(--theme-warning-400)',
450: 'var(--theme-warning-450)',
500: 'var(--theme-warning-500)',
550: 'var(--theme-warning-550)',
600: 'var(--theme-warning-600)',
650: 'var(--theme-warning-650)',
700: 'var(--theme-warning-700)',
750: 'var(--theme-warning-750)',
800: 'var(--theme-warning-800)',
850: 'var(--theme-warning-850)',
900: 'var(--theme-warning-900)',
950: 'var(--theme-warning-950)',
},
'error': {
0: 'var(--theme-error-0)',
50: 'var(--theme-error-50)',
100: 'var(--theme-error-100)',
150: 'var(--theme-error-150)',
200: 'var(--theme-error-200)',
250: 'var(--theme-error-250)',
300: 'var(--theme-error-300)',
350: 'var(--theme-error-350)',
400: 'var(--theme-error-400)',
450: 'var(--theme-error-450)',
500: 'var(--theme-error-500)',
550: 'var(--theme-error-550)',
600: 'var(--theme-error-600)',
650: 'var(--theme-error-650)',
700: 'var(--theme-error-700)',
750: 'var(--theme-error-750)',
800: 'var(--theme-error-800)',
850: 'var(--theme-error-850)',
900: 'var(--theme-error-900)',
950: 'var(--theme-error-950)',
},
},
},
},
variants: {},
plugins: [],
};Including Accent color from https://10xmedia.de/theme
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'base': {
0: 'var(--theme-base-0)',
50: 'var(--theme-base-50)',
100: 'var(--theme-base-100)',
150: 'var(--theme-base-150)',
200: 'var(--theme-base-200)',
250: 'var(--theme-base-250)',
300: 'var(--theme-base-300)',
350: 'var(--theme-base-350)',
400: 'var(--theme-base-400)',
450: 'var(--theme-base-450)',
500: 'var(--theme-base-500)',
550: 'var(--theme-base-550)',
600: 'var(--theme-base-600)',
650: 'var(--theme-base-650)',
700: 'var(--theme-base-700)',
750: 'var(--theme-base-750)',
800: 'var(--theme-base-800)',
850: 'var(--theme-base-850)',
900: 'var(--theme-base-900)',
950: 'var(--theme-base-950)',
},
'success': {
0: 'var(--theme-success-0)',
50: 'var(--theme-success-50)',
100: 'var(--theme-success-100)',
150: 'var(--theme-success-150)',
200: 'var(--theme-success-200)',
250: 'var(--theme-success-250)',
300: 'var(--theme-success-300)',
350: 'var(--theme-success-350)',
400: 'var(--theme-success-400)',
450: 'var(--theme-success-450)',
500: 'var(--theme-success-500)',
550: 'var(--theme-success-550)',
600: 'var(--theme-success-600)',
650: 'var(--theme-success-650)',
700: 'var(--theme-success-700)',
750: 'var(--theme-success-750)',
800: 'var(--theme-success-800)',
850: 'var(--theme-success-850)',
900: 'var(--theme-success-900)',
950: 'var(--theme-success-950)',
},
'warning': {
0: 'var(--theme-warning-0)',
50: 'var(--theme-warning-50)',
100: 'var(--theme-warning-100)',
150: 'var(--theme-warning-150)',
200: 'var(--theme-warning-200)',
250: 'var(--theme-warning-250)',
300: 'var(--theme-warning-300)',
350: 'var(--theme-warning-350)',
400: 'var(--theme-warning-400)',
450: 'var(--theme-warning-450)',
500: 'var(--theme-warning-500)',
550: 'var(--theme-warning-550)',
600: 'var(--theme-warning-600)',
650: 'var(--theme-warning-650)',
700: 'var(--theme-warning-700)',
750: 'var(--theme-warning-750)',
800: 'var(--theme-warning-800)',
850: 'var(--theme-warning-850)',
900: 'var(--theme-warning-900)',
950: 'var(--theme-warning-950)',
},
'error': {
0: 'var(--theme-error-0)',
50: 'var(--theme-error-50)',
100: 'var(--theme-error-100)',
150: 'var(--theme-error-150)',
200: 'var(--theme-error-200)',
250: 'var(--theme-error-250)',
300: 'var(--theme-error-300)',
350: 'var(--theme-error-350)',
400: 'var(--theme-error-400)',
450: 'var(--theme-error-450)',
500: 'var(--theme-error-500)',
550: 'var(--theme-error-550)',
600: 'var(--theme-error-600)',
650: 'var(--theme-error-650)',
700: 'var(--theme-error-700)',
750: 'var(--theme-error-750)',
800: 'var(--theme-error-800)',
850: 'var(--theme-error-850)',
900: 'var(--theme-error-900)',
950: 'var(--theme-error-950)',
},
'accent': {
0: 'var(--theme-accent-0)',
50: 'var(--theme-accent-50)',
100: 'var(--theme-accent-100)',
150: 'var(--theme-accent-150)',
200: 'var(--theme-accent-200)',
250: 'var(--theme-accent-250)',
300: 'var(--theme-accent-300)',
350: 'var(--theme-accent-350)',
400: 'var(--theme-accent-400)',
450: 'var(--theme-accent-450)',
500: 'var(--theme-accent-500)',
550: 'var(--theme-accent-550)',
600: 'var(--theme-accent-600)',
650: 'var(--theme-accent-650)',
700: 'var(--theme-accent-700)',
750: 'var(--theme-accent-750)',
800: 'var(--theme-accent-800)',
850: 'var(--theme-accent-850)',
900: 'var(--theme-accent-900)',
950: 'var(--theme-accent-950)',
},
},
},
},
variants: {},
plugins: [],
};