tailwind.config.cjs

// const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
module.exports = {
  content: ["index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    colors: {
      initial: "initial",
      inherit: "inherit",
      transparent: "transparent",
      current: "currentColor",
      white: "#fafafa", // rgb(250, 250, 250)
      black: {
        DEFAULT: "#121212", // rgb(18, 18, 18)
        primary: "#121212", // rgb(18, 18, 18)
        secondary: "#1B1B1B", // rgb(27, 27, 27)
        tertiary: "#262626", // rgb(38, 38, 38)
      },
      body: {
        disabled: "#5a5a5a", // rgb(90, 90, 90)
        secondary: "#a5a5a5", // rgb(165, 165, 165)
        DEFAULT: "#fafafa", // rgb(250, 250, 250)
        black: "#121212", // rgb(18, 18, 18)
      },
      field: "#1B1B1B", // rgb(27, 27, 27)
      pill: "#262626", // rgb(38, 38, 38 )
      alert: {
        success: "#38d448", // rgb(56, 212, 72)
        warn: "#f48f45", // rgb(244, 143, 69)
        error: "#d22424", // rgb(210, 36, 36)
      },
      green: {
        200: "#cdf4d1", // rgb(205, 244, 209)
        DEFAULT: "#38d448", // rgb(56, 212, 72)
        500: "#38d448", // rgb(56, 212, 72)
      },
      orange: {
        200: "#ecdcb1", // rgb(236, 220, 177)
        DEFAULT: "#f48f45", // rgb(244, 143, 69)
        500: "#f48f45", // rgb(244, 143, 69)
      },
      red: {
        200: "#e0b5b5", // rgb(224, 181, 181)
        DEFAULT: "#d22424", // rgb(210, 36, 36)
        500: "#d22424", // rgb(210, 36, 36)
      },
      primary: {
        DEFAULT: "#d5ff5c", // rgb(213, 255, 92)
        500: "#d5ff5c", // rgb(213, 255, 92)
        700: "#c8eb46", // rgb(200, 235, 70)
      },
      brand: {
        blue: "#005773", // rgb(0, 87, 115)
        pink: "#fd8fff", // rgb(253, 143, 255)
        orange: "#fd4848", // rgb(253, 72, 72)
      },
      grey: {
        50: "#fafafa", // rgb(250, 250, 250)
        100: "#f2f2f2", // rgb(242, 242, 242)
        200: "#e4e4e4", // rgb(228, 228, 228)
        300: "#d4d4d4", // rgb(212, 212, 212)
        400: "#a5a5a5", // rgb(165, 165, 165)
        500: "#717171", // rgb(113, 113, 113)
        600: "#5a5a5a", // rgb(90, 90, 90)
        700: "#3f3f3f", // rgb(63, 63, 63)
        800: "#262626", // rgb(38, 38, 38)
        900: "#181818", // rgb(24, 24, 24)
      },
    },
    extend: {
      keyframes: {
        "fade-in": {
          "0%": {
            opacity: "0",
          },
          "100%": {
            opacity: "1",
          },
        },
      },
      animation: {
        "fade-in": "fade-in 0.5s ease-out",
        "spin": "spin 2s linear infinite",
      },
    },
  },
  plugins: [],
}