/** @type {import('tailwindcss').Config} */
var flattenColorPalette =
  require("tailwindcss/lib/util/flattenColorPalette").default;
module.exports = {
  content: [
    "node_modules/daisyui/**/*.{js,jsx,ts,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        body: "#1f1f23",
        nav: "#18181b",
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
      },
    },
    screens: {
      "2xs": "160px",
      xs: "320px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
      "3xl": "1920px",
      "4xl": "2560px",
    },
    extend: {
      translate: {
        200: "200%",
        slide1: "13%",
        slide2: "96%",
        slide3: "205%",
        tog1: "1.125rem",
        tog2: "1.063rem",
        tog4: "1rem",
      },
    },
  },
  plugins: [
    require("daisyui"),
    require("tw-elements/dist/plugin"),
    require("react-daisyui"),
    require("tailwind-scrollbar-hide"),
    require("@tailwindcss/forms"),
    require("tailwindcss"),
    ({ addUtilities, e, theme, variants }) => {
      let colors = flattenColorPalette(theme("borderColor"));
      delete colors["default"];

      // Replace or Add custom colors
      if (this.theme?.extend?.colors !== undefined) {
        colors = Object.assign(colors, this.theme.extend.colors);
      }

      const colorMap = Object.keys(colors).map((color) => ({
        [`.border-t-${color}`]: { borderTopColor: colors[color] },
        [`.border-r-${color}`]: { borderRightColor: colors[color] },
        [`.border-b-${color}`]: { borderBottomColor: colors[color] },
        [`.border-l-${color}`]: { borderLeftColor: colors[color] },
      }));
      const utilities = Object.assign({}, ...colorMap);

      addUtilities(utilities, variants("borderColor"));
    },
  ],
};