tailwind.config.js

import defaultTheme from "tailwindcss/defaultTheme";

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      black: "#000000",
      white: "#ffffff",
      neutral: {
        50: "hsl(0, 0%, 95%)",
        100: "hsl(0, 0%, 90%)",
        200: "hsl(0, 0%, 80%)",
        300: "hsl(0, 0%, 70%)",
        400: "hsl(0, 0%, 60%)",
        500: "hsl(0, 0%, 50%)",
        600: "hsl(0, 0%, 40%)",
        700: "hsl(0, 0%, 30%)",
        800: "hsl(0, 0%, 20%)",
        900: "hsl(0, 0%, 10%)",
        950: "hsl(0, 0%, 5%)",
      },
      primary: {
        50: "hsl(91, 92%, 95%)",
        100: "hsl(89, 92%, 90%)",
        200: "hsl(90, 92%, 80%)",
        300: "hsl(90, 92%, 70%)",
        400: "hsl(90, 92%, 60%)",
        500: "hsl(90, 92%, 50%)",
        600: "hsl(90, 92%, 40%)",
        700: "hsl(90, 92%, 30%)",
        800: "hsl(90, 92%, 20%)",
        900: "hsl(89, 92%, 10%)",
        950: "hsl(89, 92%, 5%)",
      },
      secondary: {
        50: "hsl(180, 92%, 95%)",
        100: "hsl(180, 92%, 90%)",
        200: "hsl(180, 92%, 80%)",
        300: "hsl(180, 92%, 70%)",
        400: "hsl(180, 92%, 60%)",
        500: "hsl(180, 92%, 50%)",
        600: "hsl(180, 92%, 40%)",
        700: "hsl(180, 92%, 30%)",
        800: "hsl(180, 92%, 20%)",
        900: "hsl(180, 92%, 10%)",
        950: "hsl(180, 92%, 5%)",
      },
      accent: {
        50: "hsl(269, 92%, 95%)",
        100: "hsl(269, 92%, 90%)",
        200: "hsl(270, 92%, 80%)",
        300: "hsl(270, 92%, 70%)",
        400: "hsl(270, 92%, 60%)",
        500: "hsl(270, 92%, 50%)",
        600: "hsl(270, 92%, 40%)",
        700: "hsl(270, 92%, 30%)",
        800: "hsl(270, 92%, 20%)",
        900: "hsl(269, 92%, 10%)",
        950: "hsl(271, 92%, 5%)",
      },
    },
    fontFamily: {
      mono: ['"IBM Plex Mono"', ...defaultTheme.fontFamily.mono],
      sans: ['"Public Sans"', ...defaultTheme.fontFamily.sans],
    },
    boxShadow: {
      sm: "2px 2px #000000",
      DEFAULT: "4px 4px #000000",
      md: "4px 4px #000000",
      lg: "8px 8px #000000",
      xl: "12px 12px #000000",
    },
    extend: {
      fontSize: {
        sm: "0.800rem",
        base: "1rem",
        xl: "1.250rem",
        "2xl": "1.563rem",
        "3xl": "1.954rem",
        "4xl": "2.442rem",
        "5xl": "3.053rem",
      },
      borderRadius: {
        sm: "0.25rem",
        DEFAULT: "0.5rem",
        md: "0.5rem",
        lg: "0.75rem",
        xl: "1rem",
        "2xl": "1.5rem",
        "3xl": "2rem",
      },
    },
  },
};