tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    screens: {
      sm: "480px",
      md: "768px",
      lg: "976px",
      xl: "1440px",
    },
    extend: {
      colors: {
        primaryBlue: {
          100: "#5b91ff",
          500: "#0052ff",
          600: "#0040c4",
        },
        Green: {
          100: "#a0ffe7",
          500: "#12cdd4",
          900: "#259fa8",
        },
        Gray: {
          100: "#f1f1f1",
          300: "#f0f0f0",
          500: "#e6e6e6",
          900: "#c4c4c4",
        },
        brightRed: "hsl(12, 88%, 59%)",
        brightRedLight: "hsl(12, 88%, 69%)",
        brightRedSupLight: "hsl(12, 88%, 95%)",
        darkBlue: "hsl(228, 39%, 23%)",
        darkGrayishBlue: "hsl(227, 12%, 61%)",
        veryDarkBlue: "hsl(233, 12%, 13%)",
        veryPaleRed: "hsl(13, 100%, 96%)",
        veryLightGray: "hsl(0, 0%, 98%)",
      },
    },
  },
  plugins: [require("tw-elements/dist/plugin")],
}