tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/components/**/*.{js,vue,ts}"],
  theme: {
    colors: {
      white: {
        50: "#ffffff",
        100: "#efefef",
        200: "#dcdcdc",
        300: "#bdbdbd",
        400: "#989898",
        500: "#7c7c7c",
        600: "#656565",
        700: "#525252",
        800: "#464646",
        900: "#3d3d3d",
        950: "#292929",
      },
      gray: {
        50: "#f6f6f6",
        100: "#e7e7e7",
        200: "#d1d1d1",
        300: "#b0b0b0",
        400: "#888888",
        500: "#707070",
        600: "#5d5d5d",
        700: "#4f4f4f",
        800: "#454545",
        900: "#3d3d3d",
        950: "#262626",
      },
      black: {
        50: "#f6f6f6",
        100: "#e7e7e7",
        200: "#d1d1d1",
        300: "#b0b0b0",
        400: "#888888",
        500: "#6d6d6d",
        600: "#5d5d5d",
        700: "#4f4f4f",
        800: "#454545",
        900: "#3d3d3d",
        950: "#232323",
      },
      "wit-blue": {
        50: "#ebfffe",
        100: "#cefffe",
        200: "#a2feff",
        300: "#63fafd",
        400: "#1cecf4",
        500: "#00e2ed",
        600: "#03a6b7",
        700: "#0a8494",
        800: "#126978",
        900: "#145765",
        950: "#063a46",
      },
      red: {
        50: "#df4b4b",
        950: "#df4b4b23",
      },
    },
    extend: {
      fontFamily: {
        title: ["Outfit", "sans-serif"],
      },
    },
    screens: {
      lg: { max: "1600px" },
      md: { max: "1200px" },
      sm: { max: "706px" },
      xs: { max: "350px" },
    },
    spacing: {
      xs: "4px",
      sm: "8px",
      md: "16px",
      "md-alt": "24px",
      lg: "32px",
      xl: "40px",
      "2xl": "64px",
      "3xl": "80px",
      "sm-x-screen": "15vw",
      "md-x-screen": "50vw",
      "2-md-x-screen": "70vw",
      "lg-x-screen": "90vw",
      "xl-x-screen": "100vw",
      "sm-y-screen": "15vh",
      "md-y-screen": "50vh",
      "2-md-y-screen": "70vh",
      "lg-y-screen": "90vh",
      "xl-y-screen": "100vh",
    },
  },
  plugins: [],
}