tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    backgroundColor: {
      primary: "#161717",
      secondary: "#232325",
      tertiary: "#414E5A",
      success: "#1ED760",
      error: "#E65353",
      brand: "#1ED760",
      muted: "#36414B",
      default: "#0C0C0C",
      divider: "#232325",
      warning: "#FCD535",
      info: "#3583ED",
      // active
      "primary-active": "#232325",
      "secondary-active": "#414E5A",
      "tertiary-active": "#1ED760",
      "success-active": "#16AC4C",
      "error-active": "#AC3535",
      "brand-active": "#16AC4C",
      "muted-active": "#36414B",
      "default-active": "#0C0C0C",
      "divider-active": "#232325",
      "warning-active": "#BD9E1C",
      "info-active": "#1D56A2",
    },
    textColor: {
      primary: "#F6F6FF",
      secondary: "#778092",
      success: "#1ED760",
      error: "#E65353",
      brand: "#1ED760",
      warning: "#FCD535",
      info: "#3583ED",
      muted: "#555C6D",
      read: "#C4D3D9",
      // hover
      "primary-hover": "#1ED760",
      "secondary-hover": "#F6F6FF",
      "success-hover": "#16AC4C",
      "error-hover": "#AC3535",
      "brand-hover": "#16AC4C",
      "warning-hover": "#BD9E1C",
      "info-hover": "#1D56A2",
      "muted-hover": "#555C6D",
      "read-hover": "#C4D3D9",
    },
    fontSize: {
      xs: "0.75rem",
      sm: "0.875rem",
      base: "1rem",
      lg: "1.125rem",
      xl: "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
      "6xl": "4rem",
    },
    fontWeight: {
      light: 300,
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
      extrabold: 800,
    },
    screens: {
      xs: "320px",
      sm: "361px",
      md: "481px",
      lg: "769px",
      xl: "1025px",
      "2xl": "1401px",
      "3xl": "1921px",
    },
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      colors: {
        text: {
          primary: "#F6F6FF",
          secondary: "#778092",
          success: "#1ED760",
          error: "#E65353",
          brand: "#1ED760",
          warning: "#FCD535",
          info: "#3583ED",
          muted: "#555C6D",
          read: "#C4D3D9",
          // hover
          "primary-hover": "#1ED760",
          "secondary-hover": "#F6F6FF",
          "success-hover": "#16AC4C",
          "error-hover": "#AC3535",
          "brand-hover": "#16AC4C",
          "warning-hover": "#BD9E1C",
          "info-hover": "#1D56A2",
          "muted-hover": "#555C6D",
          "read-hover": "#C4D3D9",
        },
        bg: {
          primary: "#161717",
          secondary: "#232325",
          tertiary: "#414E5A",
          success: "#1ED760",
          error: "#E65353",
          brand: "#1ED760",
          muted: "#36414B",
          default: "#0C0C0C",
          divider: "#232325",
          warning: "#FCD535",
          info: "#3583ED",
          // active
          "primary-active": "#232325",
          "secondary-active": "#414E5A",
          "tertiary-active": "#1ED760",
          "success-active": "#16AC4C",
          "error-active": "#AC3535",
          "brand-active": "#16AC4C",
          "muted-active": "#36414B",
          "default-active": "#0C0C0C",
          "divider-active": "#232325",
          "warning-active": "#BD9E1C",
          "info-active": "#1D56A2",
        },
      },
    },
  },
  plugins: [],
};