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')",
      },
      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")],
};