text: const plugin = require("tailwindcss/plugin");
  const colors = require("tailwindcss/colors");
  const defaultTheme = require('tailwindcss/defaultTheme')
  
  module.exports = {
    mode: 'jit',
    purge: {
      enabled: true,
      content: [
        "./public/**/*.html",
        "./public/*.html",
        "./src/**/*.js",
        "./src/*.js",
        "./src/**/*.html",
        "./src/*.html",
        "./public/**/*.js",
        "./public/*.js",
      ],
      options: {
        safelist: [],
      },
    },
    theme: {
      screens: {
        xs: '540px',
        ...defaultTheme.screens,
      },
      colors: {
        ...colors,
      },
      extend: {
        minHeight: {
          "screen-75": "75vh",
        },
        fontSize: {
          55: "55rem",
        },
        opacity: {
          80: ".8",
        },
        zIndex: {
          2: 2,
          3: 3,
        },
        inset: {
          "-100": "-100%",
          "-225-px": "-225px",
          "-160-px": "-160px",
          "-150-px": "-150px",
          "-94-px": "-94px",
          "-50-px": "-50px",
          "-29-px": "-29px",
          "-20-px": "-20px",
          "25-px": "25px",
          "40-px": "40px",
          "95-px": "95px",
          "145-px": "145px",
          "195-px": "195px",
          "210-px": "210px",
          "260-px": "260px",
        },
        height: {
          "95-px": "95px",
          "70-px": "70px",
          "350-px": "350px",
          "500-px": "500px",
          "600-px": "600px",
        },
        maxHeight: {
          "860-px": "860px",
        },
        maxWidth: {
          "100-px": "100px",
          "120-px": "120px",
          "150-px": "150px",
          "180-px": "180px",
          "200-px": "200px",
          "210-px": "210px",
          "580-px": "580px",
        },
        minWidth: {
          "140-px": "140px",
          48: "12rem",
        },
        backgroundSize: {
          full: "100%",
        },
        animation: {
          blob: "blob 7s infinite",
        },
        keyframes: {
          blob: {
            "0%": {
              transform: "translate(0px, 0px) scale(1)",
            },
            "33%": {
              transform: "translate(30px, -50px) scale(1.1)",
            },
            "66%": {
              transform: "translate(-20px, 20px) scale(0.9)",
            },
            "100%": {
              transform: "tranlate(0px, 0px) scale(1)",
            },
          },
        },
      },
    },
    variants: [
      "responsive",
      "group-hover",
      "focus-within",
      "first",
      "last",
      "odd",
      "even",
      "hover",
      "focus",
      "active",
      "visited",
      "disabled",
    ],
    plugins: [
      require("@tailwindcss/forms"),
      plugin(function ({ addComponents, theme }) {
        const screens = theme("screens", {});
        addComponents([
          {
            ".container": { width: "100%" },
          },
          {
            [`@media (min-width: ${screens.sm})`]: {
              ".container": {
                "max-width": "640px",
              },
            },
          },
          {
            [`@media (min-width: ${screens.md})`]: {
              ".container": {
                "max-width": "768px",
              },
            },
          },
          {
            [`@media (min-width: ${screens.lg})`]: {
              ".container": {
                "max-width": "1024px",
              },
            },
          },
          {
            [`@media (min-width: ${screens.xl})`]: {
              ".container": {
                "max-width": "1280px",
              },
            },
          },
          {
            [`@media (min-width: ${screens["2xl"]})`]: {
              ".container": {
                "max-width": "1280px",
              },
            },
          },
        ]);
      }),
    ],
  };
  