const colors = require("./src/colors.json");

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    // TODO: wenn man den server-pfad auch angibt wird Tailwind langsamer?! (Startzeit erhöht sich stark...)
    // '../server/vbv_lernwelt/**/*.{html,js,py}',
  ],
  theme: {
    fontFamily: {
      sans: ["Buenos Aires", "sans-serif"],
    },
    backgroundSize: {
      auto: "auto",
      cover: "cover",
      contain: "contain",
      60: "3.75rem",
    },
    extend: {
      spacing: {
        128: "32rem",
      },
      maxWidth: {
        "8xl": "88rem",
        "9xl": "96rem",
      },
      backgroundImage: {
        "handlungsfelder-overview":
          "url('/static/icons/icon-handlungsfelder-overview.svg')",
        "lernmedien-overview": "url('/static/icons/icon-lernmedien-overview.svg')",
        assignment: "url('/static/icons/icon-lc-assignment.svg')",
        feedback: "url('/static/icons/icon-feedback.svg')",
        test: "url('/static/icons/icon-lc-test.svg')",
        message: "url('/static/icons/icon-message.svg')",
      },
      borderColor: (theme) => ({
        DEFAULT: theme("colors.gray.500"),
      }),
    },
    colors: colors,
  },
  safelist: [
    {
      pattern:
        /bg-(blue|sky|green|red|orange|yellow|stone|gray|slate)-(200|300|400|500|600|700|800|900)/,
    },
    "it-icon",
    "bg-handlungsfelder-overview",
    "bg-lernmedien-overview",
  ],
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@headlessui/tailwindcss"),
  ],
};
