tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        accent: {
          50: "#F4F2FF",
          100: "#E8E5FE",
          200: "#CFC8FD",
          300: "#B2A5FD",
          400: "#8F7AFC",
          500: "#612FFB",
          600: "#4B24C2",
          700: "#3D1E9F",
          800: "#2B1570",
          900: "#1F0F50",
          950: "#130932",
          1000: "#0C0620",
        },
        neutral: {
          50: "#F9F8FA",
          100: "#F3F2F5",
          200: "#E8E8EC",
          300: "#D6D5DD",
          400: "#C0BCC9",
          500: "#A6A0B2",
          600: "#958CA1",
          700: "#7F768B",
          800: "#6B6374",
          900: "#585260",
          950: "#3A3540",
        },
        success: {
          50: "#F0FBEA",
          100: "#DEF5D2",
          200: "#BEEDA9",
          300: "#96DF77",
          400: "#71CE4D",
          500: "#4FAE2D",
          600: "#3D8F21",
          700: "#306D1E",
          800: "#2A571D",
          900: "#254B1C",
          950: "#10280B",
        },
        warning: {
          50: "#FFF9ED",
          100: "#FFF2D5",
          200: "#FFE0A9",
          300: "#FEC973",
          400: "#FDA73A",
          500: "#FB8B13",
          600: "#EC6F0A",
          700: "#C4540A",
          800: "#9B4211",
          900: "#7D3911",
          950: "#441B06",
        },
        error: {
          50: "#FFF1F1",
          100: "#FFE1E1",
          200: "#FFC7C7",
          300: "#FFA1A1",
          400: "#FF6A6A",
          500: "#F73C3C",
          600: "#E01A1A",
          700: "#C11414",
          800: "#9F1515",
          900: "#841818",
          950: "#480707",
        },
        // todo: add status 1 & 2
        // todo: remove button & modal
        button: "#262830",
        modal: "#1C1D2D",
      },

      backgroundColor: (theme) => ({
        ...theme("colors.accent"),
        ...theme("colors.neutral"),
        ...theme("colors.success"),
        ...theme("colors.warning"),
        ...theme("colors.error"),
        button: theme("colors.button"),
        modal: theme("colors.modal"),
      }),
      textColor: (theme) => ({
        ...theme("colors.accent"),
        ...theme("colors.neutral"),
        ...theme("colors.success"),
        ...theme("colors.warning"),
        ...theme("colors.error"),
      }),
      borderColor: (theme) => ({
        ...theme("colors.accent"),
        ...theme("colors.neutral"),
        ...theme("colors.success"),
        ...theme("colors.warning"),
        ...theme("colors.error"),
      }),
      fontFamily: {
        manrope: ["Manrope", "sans-serif"],
      },
    },
  },
  plugins: [],
};