M3 + Tailwind Generator
1. Configuration
2: Preview
primary
on-primary
primary-container
on-primary-container
secondary
on-secondary
secondary-container
on-secondary-container
tertiary
on-tertiary
tertiary-container
on-tertiary-container
error
on-error
error-container
on-error-container
background
on-background
surface
on-surface
surface-variant
on-surface-variant
outline
outline-variant
shadow
scrim
inverse-surface
inverse-on-surface
inverse-primary
primary-dark
on-primary-dark
primary-container-dark
on-primary-container-dark
secondary-dark
on-secondary-dark
secondary-container-dark
on-secondary-container-dark
tertiary-dark
on-tertiary-dark
tertiary-container-dark
on-tertiary-container-dark
error-dark
on-error-dark
error-container-dark
on-error-container-dark
background-dark
on-background-dark
surface-dark
on-surface-dark
surface-variant-dark
on-surface-variant-dark
outline-dark
outline-variant-dark
shadow-dark
scrim-dark
inverse-surface-dark
inverse-on-surface-dark
inverse-primary-dark
3: Export
{
"primary-dark": "#bcc2ff",
"on-primary-dark": "#00169d",
"primary-container-dark": "#0022da",
"on-primary-container-dark": "#dfe0ff",
"secondary-dark": "#c4c5dd",
"on-secondary-dark": "#2d2f42",
"secondary-container-dark": "#444559",
"on-secondary-container-dark": "#e0e0f9",
"tertiary-dark": "#e7b9d6",
"on-tertiary-dark": "#45263c",
"tertiary-container-dark": "#5e3c54",
"on-tertiary-container-dark": "#ffd7ef",
"error-dark": "#ffb4ab",
"on-error-dark": "#690005",
"error-container-dark": "#93000a",
"on-error-container-dark": "#ffb4ab",
"background-dark": "#1b1b1f",
"on-background-dark": "#e4e1e6",
"surface-dark": "#1b1b1f",
"on-surface-dark": "#e4e1e6",
"surface-variant-dark": "#46464f",
"on-surface-variant-dark": "#c7c5d0",
"outline-dark": "#91909a",
"outline-variant-dark": "#46464f",
"shadow-dark": "#000000",
"scrim-dark": "#000000",
"inverse-surface-dark": "#e4e1e6",
"inverse-on-surface-dark": "#303034",
"inverse-primary-dark": "#2640ff",
"primary": "#2640ff",
"on-primary": "#ffffff",
"primary-container": "#dfe0ff",
"on-primary-container": "#000a64",
"secondary": "#5b5d72",
"on-secondary": "#ffffff",
"secondary-container": "#e0e0f9",
"on-secondary-container": "#181a2c",
"tertiary": "#77536c",
"on-tertiary": "#ffffff",
"tertiary-container": "#ffd7ef",
"on-tertiary-container": "#2d1127",
"error": "#ba1a1a",
"on-error": "#ffffff",
"error-container": "#ffdad6",
"on-error-container": "#410002",
"background": "#fffbff",
"on-background": "#1b1b1f",
"surface": "#fffbff",
"on-surface": "#1b1b1f",
"surface-variant": "#e3e1ec",
"on-surface-variant": "#46464f",
"outline": "#777680",
"outline-variant": "#c7c5d0",
"shadow": "#000000",
"scrim": "#000000",
"inverse-surface": "#303034",
"inverse-on-surface": "#f3f0f4",
"inverse-primary": "#bcc2ff"
} Put this in the colors section of tailwind.config.js