tailwind css material themes based on Google Material Design 3 using @material/material-color-utilities

tailwind.config.ts

import type { Config } from "tailwindcss"
import {
  argbFromHex,
  hexFromArgb,
  Hct,
  SchemeContent,
} from "@material/material-color-utilities"

const SOURCE_COLOR = "#0192d1"
const argb = argbFromHex(SOURCE_COLOR)
const source = Hct.fromInt(argb)
const lightScheme = new SchemeContent(source, false, 0)
// const darkScheme = new SchemeContent(source, true, -1)

const getThemeColors = (scheme: SchemeContent) => ({
  primary: hexFromArgb(scheme.primary),
  "inverse-primary": hexFromArgb(scheme.inversePrimary),
  "on-primary": hexFromArgb(scheme.onPrimary),
  secondary: hexFromArgb(scheme.secondary),
  "on-secondary": hexFromArgb(scheme.onSecondary),
  accent: hexFromArgb(scheme.tertiary),
  "on-accent": hexFromArgb(scheme.onTertiary),
  background: hexFromArgb(scheme.background),
  "on-background": hexFromArgb(scheme.onBackground),
  surface: hexFromArgb(scheme.surface),
  "on-surface": hexFromArgb(scheme.onSurface),
  "inverse-surface": hexFromArgb(scheme.inverseSurface),
  "inverse-on-surface": hexFromArgb(scheme.inverseOnSurface),
  "surface-variant": hexFromArgb(scheme.surfaceVariant),
  "on-surface-variant": hexFromArgb(scheme.onSurfaceVariant),
  "base-100": hexFromArgb(scheme.background),
  "base-content": hexFromArgb(scheme.onBackground),
  "surface-dim": hexFromArgb(scheme.surfaceDim),
  "surface-tint": hexFromArgb(scheme.surfaceTint),
  "surface-bright": hexFromArgb(scheme.surfaceBright),
  "surface-container": hexFromArgb(scheme.surfaceContainer),
  "surface-container-high": hexFromArgb(scheme.surfaceContainerHigh),
  "surface-container-highest": hexFromArgb(scheme.surfaceContainerHighest),
  "surface-container-low": hexFromArgb(scheme.surfaceContainerLow),
  "surface-container-lowest": hexFromArgb(scheme.surfaceContainerLowest),
})

export default <Partial<Config>>{
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      colors: {
        ...getThemeColors(lightScheme),
      },
    },
  },
}