tailwind.config.js

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      s: { max: "474px" },
      a: { max: "639px" },
      m: { max: "767px" },
      t: { max: "1023px" },
      d: { max: "1259px" },
      x: { max: "1339px" },
      w: { max: "1419px" },
    },
    spacing: {
      px: "1px",
      0: "0",
      2: "2px",
      4: "4px",
      6: "6px",
      8: "8px",
      10: "10px",
      12: "12px",
      14: "14px",
      16: "16px",
      18: "18px",
      20: "20px",
      22: "22px",
      24: "24px",
      26: "26px",
      28: "28px",
      30: "30px",
      32: "32px",
      40: "40px",
      48: "48px",
      54: "54px",
      56: "56px",
      60: "60px",
      96: "96px",
      166: "166px",
      180: "180px",
      200: "200px",
      256: "256px",
    },
    colors: {
      bl: "#1b1d21",
      wh: "#ffffff",
      purple: "#6c5dd3",
      purplelight: "#cfc8ff",
      text: "#11142d",
      graydark: "#808191",
      graylight: "#b2b3bd",
      orange: "#ff754c",
      pink: "#ffa2c0",
      pinklight: "#ffebf6",
      yellow: "#ffce73",
      yellowlight: "#ffe2ac",
      blue: "#3f8cff",
      bluelight: "#a0d7e7",
      bluedark: "#0049c6",
      border: "#e4e4e4",
      borderlight: "#f0f3f6",
      green: "#7fba7a",
      link: "#5f75ee",
      dark: {
        100: "#1f2128",
        200: "#242731",
      },
    },
    fontFamily: {
      fi: ["Inter", "sans-serif"],
      fp: ["Poppins", "sans-serif"],
    },
    extend: {
      fontSize: {
        14: "14px",
        16: "16px",
      },
      boxShadow: {
        darkinner: "inset 0 -1px 0 0 rgb(228 228 228 / 10%)",
        darkinner_right: "inset -1px 0 0 0 rgb(228 228 228 / 10%)",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};