message: Add: auto-generate safelist
diff: /** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig } */
  -module.exports = {
  - // @see: https://tailwindcss.com/docs/just-in-time-mode
  - mode: 'jit',
  - purge: {
  - // uncomment out to enable purge functionality on development environment.
  - // enabled: true,
  - content: ['./src/**/*.{js,jsx,ts,tsx}'],
  - },
  - darkMode: 'media',
  - theme: {
  - screens: {
  - lg: '640px',
  - },
  - // Utilities by a-z order.
  - extend: {
  - animation: {
  - 'spin-slow': 'spin 3s linear infinite',
  - },
  - colors: {
  +const COLORS = {
  background: 'var(--color-background)',
  'on-background': 'var(--color-on-background)',
  'on-background-high': 'var(--color-on-background-high)',
  @@ -61,12 +43,10 @@ module.exports = {
  'on-complementary-faint': 'var(--color-on-complementary-faint)',
  'complementary-variant': 'var(--color-complementary-variant)',
  'on-complementary-variant': 'var(--color-on-complementary-variant)',
  - 'on-complementary-variant-high':
  - 'var(--color-on-complementary-variant-high)',
  + 'on-complementary-variant-high': 'var(--color-on-complementary-variant-high)',
  'on-complementary-variant-medium':
  'var(--color-on-complementary-variant-medium)',
  - 'on-complementary-variant-low':
  - 'var(--color-on-complementary-variant-low)',
  + 'on-complementary-variant-low': 'var(--color-on-complementary-variant-low)',
  'on-complementary-variant-slight':
  'var(--color-on-complementary-variant-slight)',
  'on-complementary-variant-faint':
  @@ -78,7 +58,55 @@ module.exports = {
  'on-error-low': 'var(--color-on-error-low)',
  'on-error-slight': 'var(--color-on-error-slight)',
  'on-error-faint': 'var(--color-on-error-faint)',
  +};
  +const PREFIXES = [
  + 'bg',
  + 'active:bg',
  + 'focus:bg',
  + 'hover:bg',
  + 'border',
  + 'active:border',
  + 'focus:border',
  + 'hover:border',
  + 'text',
  + 'active:text',
  + 'focus:text',
  + 'hover:text',
  + 'ring',
  + 'active:ring',
  + 'focus:ring',
  + 'hover:ring',
  +];
  +
  +module.exports = {
  + // @see: https://tailwindcss.com/docs/just-in-time-mode
  + mode: 'jit',
  + purge: {
  + // uncomment out to enable purge functionality on development environment.
  + // enabled: true,
  + content: ['./src/**/*.{js,jsx,ts,tsx}'],
  + safelist: (function () {
  + const keys = Object.keys(COLORS);
  + const safelist = [];
  + PREFIXES.forEach(function (prefix) {
  + keys.forEach(function (key) {
  + safelist.push(`${prefix}-${key}`);
  + });
  + });
  + return safelist;
  + })(),
  + },
  + darkMode: 'media',
  + theme: {
  + screens: {
  + lg: '640px',
  + },
  + // Utilities by a-z order.
  + extend: {
  + animation: {
  + 'spin-slow': 'spin 3s linear infinite',
  },
  + colors: COLORS,
  fontSize: {
  em: '1em',
  xxs: ['0.625rem', '1rem'],
  