tailwind.config.ts

import type { Config } from "tailwindcss"
import defaultTheme from "tailwindcss/defaultTheme"

const additionalSizes = {
  13: "3.25rem" /* 52px */,
  15: "3.75rem" /* 60px */,
  18: "4.5rem" /* 72px */,
  19: "4.75rem" /* 76px */,
  22: "5.5rem" /* 88px */,
  26: "6.5rem" /* 104px */,
  27: "6.75rem" /* 108px */,
  30: "7.5rem" /* 120px */,
  31: "7.75rem" /* 124px */,
  34: "8.5rem" /* 136px */,
  38: "9.5rem" /* 152px */,
  46: "11.5rem" /* 184px */,
  50: "12.5rem" /* 200px */,
  68: "17rem" /* 272px */,
  70: "17.5rem" /* 280px */,
  75: "18.75rem" /* 300px */,
  82: "20.5rem" /* 328px */,
  92: "23rem" /* 368px */,
  100: "25rem" /* 400px */,
  105: "26.25rem" /* 420px */,
  110: "27.5rem" /* 440px */,
  112: "28rem" /* 448px */,
  120: "30rem" /* 480px */,
  126: "31.5rem" /* 504px */,
  130: "32.5rem" /* 520px */,
  150: "37.5rem" /* 600px */,
  152: "38rem" /* 608px */,
  158: "39.5rem" /* 632px */,
  160: "40rem" /* 640px */,
  180: "45rem" /* 720px */,
}

const config: Config = {
  content: ["./components/**/*.{html,js,tsx}", "./app/**/*.{html,js,tsx}"],
  theme: {
    extend: {
      keyframes: {
        slide: {
          "0%": { transform: "translateX(0)" },
          "100%": { transform: "translateX(-100%)" },
        },
      },
      animation: {
        slide: "35s slide infinite linear",
      },
      screens: {
        xs: "480px",
        sm: "640px",
        md: "768px",
        lg: "1024px",
        xl: "1280px",
        "2xl": "1440px",
      },
      fontFamily: {
        sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
      },
      colors: {
        "grey-100": "#121926",
        "grey-90": "#202939",
        "grey-80": "#364152",
        "grey-70": "#4B5565",
        "grey-60": "#697586",
        "grey-50": "#9AA4B2",
        "grey-40": "#CDD5DF",
        "grey-30": "#E3E8EF",
        "grey-20": "#EBEDF0",
        "grey-10": "#F7F8FA",
        yellow: "#FAC515",
      },
      transitionDuration: {
        600: "600ms",
      },
      transitionDelay: {
        150: "150ms",
        300: "300ms",
        450: "450ms",
        600: "600ms",
        750: "750ms",
        900: "900ms",
        1050: "1050ms",
        1200: "1200ms",
        1350: "1350ms",
        1500: "1500ms",
      },
      borderRadius: {
        5: "1.25rem",
        8: "2rem",
        16: "4rem",
        20: "5rem",
        30: "7.5rem",
      },
      margin: additionalSizes,
      padding: additionalSizes,
      height: additionalSizes,
      width: additionalSizes,
      maxWidth: additionalSizes,
      minWidth: additionalSizes,
      maxHeight: additionalSizes,
      minHeight: additionalSizes,
      gap: additionalSizes,
      transitionTimingFunction: {
        ease: "ease",
      },
    },
  },
  plugins: [],
}
export default config