Angular Material 3 + Tailwind 4 stack

[micobarac]

palettes.scss:

@use 'sass:map';
@use 'sass:color';

/* Color palettes */
$palettes: (
  primary: (
    50: #fef2f3,
    100: #ffe1e4,
    200: #ffc8ce,
    300: #ffa2ad,
    400: #fc6d7e,
    500: #f4364c,
    600: #e22036,
    700: #be172a,
    800: #9d1727,
    900: #821a26,
    950: #47080f
  ),
  secondary: (
    50: #f4f7fb,
    100: #e9eef5,
    200: #cedce9,
    300: #a2bed7,
    400: #709bc0,
    500: #4e7fa9,
    600: #3c668d,
    700: #315273,
    800: #2c4660,
    900: #293c51,
    950: #141d28
  ),
  tertiary: (
    50: #effefc,
    100: #c8fff5,
    200: #91feee,
    300: #36f4de,
    400: #1fe2d1,
    500: #06c6b9,
    600: #029f97,
    700: #067f7a,
    800: #0b6463,
    900: #0e5351,
    950: #003333
  ),
  neutral: (
    50: #f8f9fa,
    100: #f2f3f5,
    200: #e8eaec,
    300: #d5d9dd,
    400: #bcc3c9,
    500: #a1a8b1,
    600: #939aa5,
    700: #777e8a,
    800: #636974,
    900: #525760,
    950: #363a3f
  ),
  info: (
    50: #f0faff,
    100: #e0f3fe,
    200: #b9e9fe,
    300: #7cd9fd,
    400: #36c6fa,
    500: #0cb0eb,
    600: #009cde,
    700: #0170a3,
    800: #065e86,
    900: #0b4e6f,
    950: #07324a
  ),
  success: (
    50: #f4faeb,
    100: #e6f3d4,
    200: #cfe9ad,
    300: #afd97d,
    400: #8bc34a,
    500: #73ac36,
    600: #588828,
    700: #446922,
    800: #395420,
    900: #32481f,
    950: #18270c
  ),
  warning: (
    50: #fff5ed,
    100: #ffe9d4,
    200: #ffcfa8,
    300: #ffad70,
    400: #ff7f37,
    500: #ff6720,
    600: #f04106,
    700: #c72d07,
    800: #9e250e,
    900: #7f220f,
    950: #450d05
  ),
  alert: (
    50: #fff0f0,
    100: #ffdddd,
    200: #ffc0c0,
    300: #ff9494,
    400: #ff5757,
    500: #ff2323,
    600: #ff0808,
    700: #d70000,
    800: #b10303,
    900: #920a0a,
    950: #500000
  )
);

/* Simple mapping from Tailwind CSS to M3 shades */
@function tailwind-to-m3($tw-palette) {
  $m3-palette: (
    0: #000000,
    10: map.get($tw-palette, 950),
    20: map.get($tw-palette, 900),
    25: color.mix(map.get($tw-palette, 900), map.get($tw-palette, 800), 50%),
    30: map.get($tw-palette, 800),
    35: map.get($tw-palette, 700),
    40: map.get($tw-palette, 600),
    50: map.get($tw-palette, 500),
    60: map.get($tw-palette, 400),
    70: map.get($tw-palette, 300),
    80: map.get($tw-palette, 200),
    90: map.get($tw-palette, 100),
    95: color.mix(map.get($tw-palette, 100), map.get($tw-palette, 50), 50%),
    98: map.get($tw-palette, 50),
    99: color.mix(map.get($tw-palette, 50), white, 60%),
    100: #ffffff
  );

  @return $m3-palette;
}

/* For neutral palette only, add the extra M3 shades */
@function tailwind-to-m3-neutral($tw-palette) {
  $base: tailwind-to-m3($tw-palette);

  /* Add special neutral values only to the neutral palette */
  @return map.merge(
    $base,
    (
      4: color.mix(map.get($tw-palette, 950), black, 50%),
      6: color.mix(map.get($tw-palette, 950), black, 70%),
      12: color.mix(map.get($tw-palette, 950), map.get($tw-palette, 900), 60%),
      17: color.mix(map.get($tw-palette, 950), map.get($tw-palette, 900), 40%),
      22: color.mix(map.get($tw-palette, 900), map.get($tw-palette, 800), 60%),
      24: color.mix(map.get($tw-palette, 900), map.get($tw-palette, 800), 40%),
      87: color.mix(map.get($tw-palette, 300), map.get($tw-palette, 200), 60%),
      92: color.mix(map.get($tw-palette, 200), map.get($tw-palette, 100), 60%),
      94: color.mix(map.get($tw-palette, 200), map.get($tw-palette, 100), 40%),
      96: color.mix(map.get($tw-palette, 100), map.get($tw-palette, 50), 60%)
    )
  );
}

/* Create M3 palettes from Tailwind CSS palettes */
$m3-palettes: (
  primary: tailwind-to-m3(map.get($palettes, primary)),
  secondary: tailwind-to-m3(map.get($palettes, secondary)),
  tertiary: tailwind-to-m3(map.get($palettes, tertiary)),
  neutral: tailwind-to-m3-neutral(map.get($palettes, neutral)),
  neutral-variant: tailwind-to-m3(map.get($palettes, neutral)),
  error: tailwind-to-m3(map.get($palettes, alert))
);

/* Define the rest map using our M3 palettes (not the original Tailwind CSS ones) */
$rest: (
  secondary: map.get($m3-palettes, secondary),
  neutral: map.get($m3-palettes, neutral),
  neutral-variant: map.get($m3-palettes, neutral-variant),
  error: map.get($m3-palettes, error)
);

/* Merge the primary M3 palette with the rest */
$primary-palette: map.merge(map.get($m3-palettes, primary), $rest);

/* Merge the tertiary M3 palette with the rest */
$tertiary-palette: map.merge(map.get($m3-palettes, tertiary), $rest);

/* Export palettes for Tailwind CSS */
:root {
  @each $palette, $shades in $palettes {
    @each $shade, $color in $shades {
      --palette-#{$palette}-#{$shade}: #{$color};
    }
  }
}

tailwind.css:

/* Initiate Tailwind CSS */
@import 'tailwindcss';

/* Import theme */
@import './themes/tailwind/theme.css';

/* Load extensions */
@import './themes/tailwind/extensions/shadow.css';
@import './themes/tailwind/extensions/clip-path.css';

/* Load plugins */
@plugin 'tailwind-scrollbar' {
  preferredstrategy: 'pseudoelements';
}

/* Setup dark variant */
@custom-variant dark (&:where(.dark, .dark *));

/* Setup theme */
@theme {
  --font-sans: Roboto, ui-sans-serif, system-ui, sans-serif;
  --font-condensed: 'Roboto Condensed', ui-sans-serif, system-ui, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --text-msm: 0.8rem;
  --text-msm--line-height: 1.1rem;

  --text-md: 0.9rem;
  --text-md--line-height: 1.3rem;

  --text-normal: 0.925rem;
  --text-normal--line-height: 1.4rem;

  --text-big: 0.95rem;
  --text-big--line-height: 1.5rem;

  --color-primary-50: var(--palette-primary-50);
  --color-primary-100: var(--palette-primary-100);
  --color-primary-200: var(--palette-primary-200);
  --color-primary-300: var(--palette-primary-300);
  --color-primary-400: var(--palette-primary-400);
  --color-primary-500: var(--palette-primary-500);
  --color-primary-600: var(--palette-primary-600);
  --color-primary-700: var(--palette-primary-700);
  --color-primary-800: var(--palette-primary-800);
  --color-primary-900: var(--palette-primary-900);
  --color-primary-950: var(--palette-primary-950);

  --color-secondary-50: var(--palette-secondary-50);
  --color-secondary-100: var(--palette-secondary-100);
  --color-secondary-200: var(--palette-secondary-200);
  --color-secondary-300: var(--palette-secondary-300);
  --color-secondary-400: var(--palette-secondary-400);
  --color-secondary-500: var(--palette-secondary-500);
  --color-secondary-600: var(--palette-secondary-600);
  --color-secondary-700: var(--palette-secondary-700);
  --color-secondary-800: var(--palette-secondary-800);
  --color-secondary-900: var(--palette-secondary-900);
  --color-secondary-950: var(--palette-secondary-950);

  --color-tertiary-50: var(--palette-tertiary-50);
  --color-tertiary-100: var(--palette-tertiary-100);
  --color-tertiary-200: var(--palette-tertiary-200);
  --color-tertiary-300: var(--palette-tertiary-300);
  --color-tertiary-400: var(--palette-tertiary-400);
  --color-tertiary-500: var(--palette-tertiary-500);
  --color-tertiary-600: var(--palette-tertiary-600);
  --color-tertiary-700: var(--palette-tertiary-700);
  --color-tertiary-800: var(--palette-tertiary-800);
  --color-tertiary-900: var(--palette-tertiary-900);
  --color-tertiary-950: var(--palette-tertiary-950);

  --color-neutral-50: var(--palette-neutral-50);
  --color-neutral-100: var(--palette-neutral-100);
  --color-neutral-200: var(--palette-neutral-200);
  --color-neutral-300: var(--palette-neutral-300);
  --color-neutral-400: var(--palette-neutral-400);
  --color-neutral-500: var(--palette-neutral-500);
  --color-neutral-600: var(--palette-neutral-600);
  --color-neutral-700: var(--palette-neutral-700);
  --color-neutral-800: var(--palette-neutral-800);
  --color-neutral-900: var(--palette-neutral-900);
  --color-neutral-950: var(--palette-neutral-950);

  --color-info-50: var(--palette-info-50);
  --color-info-100: var(--palette-info-100);
  --color-info-200: var(--palette-info-200);
  --color-info-300: var(--palette-info-300);
  --color-info-400: var(--palette-info-400);
  --color-info-500: var(--palette-info-500);
  --color-info-600: var(--palette-info-600);
  --color-info-700: var(--palette-info-700);
  --color-info-800: var(--palette-info-800);
  --color-info-900: var(--palette-info-900);
  --color-info-950: var(--palette-info-950);

  --color-success-50: var(--palette-success-50);
  --color-success-100: var(--palette-success-100);
  --color-success-200: var(--palette-success-200);
  --color-success-300: var(--palette-success-300);
  --color-success-400: var(--palette-success-400);
  --color-success-500: var(--palette-success-500);
  --color-success-600: var(--palette-success-600);
  --color-success-700: var(--palette-success-700);
  --color-success-800: var(--palette-success-800);
  --color-success-900: var(--palette-success-900);
  --color-success-950: var(--palette-success-950);

  --color-warning-50: var(--palette-warning-50);
  --color-warning-100: var(--palette-warning-100);
  --color-warning-200: var(--palette-warning-200);
  --color-warning-300: var(--palette-warning-300);
  --color-warning-400: var(--palette-warning-400);
  --color-warning-500: var(--palette-warning-500);
  --color-warning-600: var(--palette-warning-600);
  --color-warning-700: var(--palette-warning-700);
  --color-warning-800: var(--palette-warning-800);
  --color-warning-900: var(--palette-warning-900);
  --color-warning-950: var(--palette-warning-950);

  --color-alert-50: var(--palette-alert-50);
  --color-alert-100: var(--palette-alert-100);
  --color-alert-200: var(--palette-alert-200);
  --color-alert-300: var(--palette-alert-300);
  --color-alert-400: var(--palette-alert-400);
  --color-alert-500: var(--palette-alert-500);
  --color-alert-600: var(--palette-alert-600);
  --color-alert-700: var(--palette-alert-700);
  --color-alert-800: var(--palette-alert-800);
  --color-alert-900: var(--palette-alert-900);
  --color-alert-950: var(--palette-alert-950);
}

Sharing color palletes between Material 3 and Tailwind 4 is only possible like this: exporting colors as :root variables, then include each of the colors, one by one, inside @theme.

Tailwind 4 doesn't allow @each inside @theme. How to perform some kind of loop, to define @theme colors?

[wongjn]

As per the documentation:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

[micobarac]

I have read the docs. Material uses SCSS, Tailwnd uses CSS. I just wanted a way not to repeat each color inside @theme. Otherwise, thet work together.

[wongjn]

There's no looping functionality. You've got it as good as its going to get.