tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        blue: {
          "primary-100": "#F0F4FF",
          "primary-200": "#D9E2FF",
          "primary-300": "#A6C1FF",
          "primary-400": "#598BFF",
          "primary-500": "#3366FF",
          "primary-600": "#274BDB",
          "primary-700": "#1A34B8",
          "primary-800": "#102694",
          "primary-900": "#091C7A",
        },
        red: {
          "primary-100": "#FFF0F0",
          "primary-200": "#FFD9D9",
          "primary-300": "#FFA6A6",
          "primary-400": "#FF5959",
          "primary-500": "#FF3333",
          "primary-600": "#DB2727",
          "primary-700": "#B81A1A",
          "primary-800": "#941010",
          "primary-900": "#7A0909",
        },
        yellow: {
          "primary-100": "#FFFDF0",
          "primary-200": "#FFF9D9",
          "primary-300": "#FFF0A6",
          "primary-400": "#FFE259",
          "primary-500": "#FFD933",
          "primary-600": "#DBB727",
          "primary-700": "#B89A1A",
          "primary-800": "#948010",
          "primary-900": "#7A6D09",
        },
        green: {
          "primary-100": "#F0FFF4",
          "primary-200": "#D9FFE2",
          "primary-300": "#A6FFC1",
          "primary-400": "#59FF8B",
          "primary-500": "#33FF66",
          "primary-600": "#27DB4B",
          "primary-700": "#1AB834",
          "primary-800": "#109624",
          "primary-900": "#097A1C",
        },
        purple: {
          "primary-100": "#F4F0FF",
          "primary-200": "#E2D9FF",
          "primary-300": "#C1A6FF",
          "primary-400": "#8B59FF",
          "primary-500": "#6633FF",
          "primary-600": "#4B27DB",
          "primary-700": "#341AB8",
          "primary-800": "#241094",
          "primary-900": "#1C097A",
        },
        pink: {
          "primary-100": "#FFF0F4",
          "primary-200": "#FFD9E2",
          "primary-300": "#FFA6C1",
          "primary-400": "#FF598B",
          "primary-500": "#FF3366",
          "primary-600": "#DB274B",
          "primary-700": "#B81A34",
          "primary-800": "#941026",
          "primary-900": "#7A091C",
        },
      },
    },
    container: {
      screens: {
        sm: "640px",
        md: "768px",
        lg: "1024px",
        xl: "1280px",
        "2xl": "2000px",
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};