tailwind.config.cjs

const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");

const safelist = [];

["blue", "red", "green", "purple", "yellow", "indigo", "pink"].forEach(
  (color) => {
    safelist.push(`bg-${color}-500`, `bg-${color}-100`, `text-${color}-800`);
  }
);

module.exports = {
  purge: {
    content: ["./src/**/*.{html,js,svelte,ts}"],
    options: {
      defaultExtractor: (content) => [
        // If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
        ...tailwindExtractor(content),
        // Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
        ...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
          ([_match, group, ..._rest]) => group
        ),
      ],
      keyframes: true,
    },
    // dynamic classes
    safelist,
  },
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
};