tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./src/libs/layouts/*.vue",
  ],
  theme: {
    screens: {
      /**
       * Old Names:
       * @screen-desktop-large: 1601px;
       * @screen-desktop: 1400px;
       * @screen-desktop-min: 1280px;
       * @screen-tablet-big: 1084px;
       * @screen-tablet: 1024px;
       * @screen-tablet-header: 940px;
       * @screen-tablet-portaint: 820px;
       * @screen-tablet-min: 768px;
       * @screen-mobile: 576px
       */
      xs: "576px",
      sm: "768px",
      md: "820px",
      "md-header": "940px",
      lg: "1024px",
      "lg-max": "1084px",
      xl: "1280px",
      "2xl": "1440px",
      "3xl": "1601px",
    },
    colors: {
      appBackground: "#f5f5f7",
      titleColor: "#222222",
      primary: "#005ae5",
      primaryActive: "#0067e0",
      violet: "#9D00FF",
      violetActive: "#a81aff",
      portfolio: "#0c5876",
      mewBg: "rgba(53,94,236,0.1)",
      enkryptBg: "rgba(186,74,255,0.1)",
      black: "#000000",
      white: "#ffffff",
      "white-40": "rgba(255,255,255,0.4)",
      info: "rgba(0, 0, 0, 0.7)",
      greyLight: "rgba(0,0,0,0.3)",
      mewGreenText: "rgba(12,88,118,1)",
      error: "rgba(228,12,91,1)",
      "error-10": "rgba(228,12,91,0.1)",
      "error-7": "rgba(228,12,91,0.07)",
      blue: "rgba(22 129,255,1)",
      "blue-10": "rgba(22,129,255,0.1)",
      "blue-7": "rgba(22,129,255,0.07)",
      purple: "rgba(104, 76, 255, 1)",
      "purple-10": "rgba(104,76,255,0.1)",
      "purple-7": "rgba(104,76,255,0.07)",
    },
    extend: {
      fontSize: {
        "s-80": ["80px", "120%"],
        "s-64": ["64px", "110%"],
        "s-54": ["54px", "120%"],
        "s-52": "52px",
        "s-40": "40px",
        "s-32": "32px",
        "s-28": "28px",
        "s-17": "17px",
      },
      lineHeight: {
        "p-100": "100%",
        "p-110": "110%",
        "p-120": "120%",
        "p-130": "130%",
        "p-140": "140%",
        "p-150": "150%",
      },
      letterSpacing: {
        "sp-06": "0.6px",
        "sp-01": "0.01em",
      },
      transitionProperty: {
        height: "height",
        bg: "background",
      },
      borderRadius: {
        "4xl": "32px",
      },
    },
  },
  plugins: [],
};