Material Color on TailwindCSS

material-color-tailwind.cjs

const { argbFromHex, themeFromSourceColor, applyTheme, hexFromArgb } = require("@material/material-color-utilities")
const tailwindPlugin = require("tailwindcss/plugin")

const materialColorPlugin = (baseColor) => {
  const theme = themeFromSourceColor(argbFromHex(baseColor));
  const props = Object.keys(theme.schemes.light.props);
  const classes = props.map(prop => prop.replace(/[A-Z]/g, l => '-' + l.toLowerCase()));
  const classToCss = Object.entries({
    bg: 'background-color',
    text: 'color',
    border: 'border-color',
    decoration: 'text-decoration-color',
    shadow: '--tw-shadow-color',
  });
  const lightComponents = Object.assign(...classToCss.map(([className, cssKey]) => Object.fromEntries(classes.map((query, index) => {
    const cssObject = {};
    cssObject[cssKey] = hexFromArgb(theme.schemes.light[props[index]]);
    return ['.' + className + '-' + query, cssObject];
  }))));
  const darkComponents = Object.assign(...classToCss.map(([className, cssKey]) => Object.fromEntries(classes.map((query, index) => {
    const cssObject = {};
    cssObject[cssKey] = hexFromArgb(theme.schemes.dark[props[index]]);
    return ['.' + className + '-' + query, cssObject];
  }))));

  const components = {
    '@media (prefers-color-scheme: dark)': darkComponents,
    '@media (prefers-color-scheme: light)': lightComponents,
  };
  return tailwindPlugin(({ addComponents }) => {
    addComponents(components);
  });
};

// tailwind.config.js
module.exports = {
  plugins: [
    materialColorPlugin('#ff0000'),
  ]
}

All classes:

.bg-primary
.bg-on-primary
.bg-primary-container
.bg-on-primary-container
.bg-secondary
.bg-on-secondary
.bg-secondary-container
.bg-on-secondary-container
.bg-tertiary
.bg-on-tertiary
.bg-tertiary-container
.bg-on-tertiary-container
.bg-error
.bg-on-error
.bg-error-container
.bg-on-error-container
.bg-background
.bg-on-background
.bg-surface
.bg-on-surface
.bg-surface-variant
.bg-on-surface-variant
.bg-outline
.bg-outline-variant
.bg-shadow
.bg-scrim
.bg-inverse-surface
.bg-inverse-on-surface
.bg-inverse-primary
.text-primary
.text-on-primary
.text-primary-container
.text-on-primary-container
.text-secondary
.text-on-secondary
.text-secondary-container
.text-on-secondary-container
.text-tertiary
.text-on-tertiary
.text-tertiary-container
.text-on-tertiary-container
.text-error
.text-on-error
.text-error-container
.text-on-error-container
.text-background
.text-on-background
.text-surface
.text-on-surface
.text-surface-variant
.text-on-surface-variant
.text-outline
.text-outline-variant
.text-shadow
.text-scrim
.text-inverse-surface
.text-inverse-on-surface
.text-inverse-primary