application_17/tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: "class", // or 'media' or 'class'
  theme: {
    backgroundColor: (theme) => ({
      ...theme("colors"),
      blueC0: "#196EC0",
      blueB0: "#517AB0",
      blue90: "#235A90",
      blueCB: "#98B2CB",
      blueEB: "#2B8DEB",
      blueFF: "#E8FCFF",
      blueFF1: "#E9F0FF",
      blueFD: "#F6F9FD",
      blueFD1 : "#F4F8FD",
      blueFFOP : "rgba(6, 146, 255, 0.36)",
      redFF: "#FFE6E6",
      redFF1: "#FF2020",
      red19: "#C01919",
      yellow2: "#FDFFDA",
      yellow3: "#EFFF00",
      gray36: "#363636",
      orange1: "#FF6600",
      greenBA: "#06BACE",
      green1: "#00FF80",
      gray20: "#202020",
      gray2077: "#20202077",
      gray2C: "#2C2C2C",
      gray36: "#363636",
      gray50: "#505050",
      grayDB: "#DBDBDB",
      grayE3: "#E3E3E3",
      grayEE: "#EEEEEE",
      grayF9: "#F9F9F9",
      grayF4: "#EBF0F4",
    }),
    textColor: (theme) => ({
      ...theme("colors"),
      primary: "#235A90",
      blueC0: "#196EC0",
      blueC01: "#1999C0",
      blueE8: "#2E81E8",
      blue52: "#132F52",
      blue5F: "#05335F",
      blueB9: "#86A0B9",
      green71: "#067182",
      greenBA: "#06BACE",
      red5F: "#5F1A05",
      red19: "#C01919",
      yellow1: "#5F5F05",
      gray1: "#333333",
      gray70: "#707070",
      grayDB: "#DBDBDB",
    }),
    // height: (theme) =>( {
    //   sm: '8px',
    //   md: '16px',
    //   lg: '24px',
    //   xl: '48px',
    //   h420 : '320px',
    //   full: '100%',
    //   }),
    borderColor: (theme) => ({
      ...theme("colors"),
      blueC0: "#196EC0",
      blueC01: "#1999C0",
      blueFE: "#C1E0FE",
      blueFF1: "#E9F0FF",
      blueB9: '#86A0B9',
      grayDB: "#DBDBDB",
      gray45: "#454545",
      red19: "#C01919",

    }),
    fill: (theme) => ({
      ...theme("colors"),
      blueC0: "#196EC0",
      grayDF: "#DFDFDF",
      greenBA: "#06BACE",
    }),
    fontSize: {
      'xs': 'clamp(9px, 2.78vw, 11px)',
      'sm': 'clamp(11px, 3.02vw , 13px)',
      'tiny': 'clamp(13px,3.28vw, 15px)',
      'base': 'clamp(15px, 3.52vw, 17px)',
      'lg': 'clamp(17px, 3.76vw, 19px)',
      'xl': 'clamp(19px, 4vw, 21px)',
      '2xl': 'clamp(21px, 4.24vw, 23px)',
      '3xl': 'clamp(23px, 4.48vw, 25px)',
      '4xl': 'clamp(25px, 4.72vw, 27px)',
      '5xl': 'clamp(27px, 4.96vw, 29px)',
      '6xl': 'clamp(29px, 5.22vw, 31px)',
      '7xl': 'clamp(31px, 4.46vw, 33px)',
      'sm-1': '0.5rem'
    },
    extend: {
      borderRadius: {
        sm: "3px",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};