tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  darkMode: "class",
  content: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem",
        sm: "2rem",
        lg: "4rem",
        xl: "5rem",
        "2xl": "6rem",
      },
    },
    screens: {
      xs: "475px",
      ...defaultTheme.screens,
    },
    colors: {
      transparent: "transparent",
      white: "#ffffff",
      black: "#000000",
      light: {
        primary: "#006c51",
        "on-primary": "#ffffff",
        "primary-container": "#81f8cf",
        "on-primary-container": "#002117",
        secondary: "#4b6359",
        "on-secondary": "#ffffff",
        "secondary-container": "#cee9dc",
        "on-secondary-container": "#082018",
        tertiary: "#3f6375",
        "on-tertiary": "#ffffff",
        "tertiary-container": "#c3e8fe",
        "on-tertiary-container": "#001e2b",
        error: "#ba1b1b",
        "on-error": "#ffffff",
        "error-container": "#ffdad4",
        "on-error-container": "#410001",
        outline: "#707974",
        background: "#fafdf9",
        "on-background": "#191c1b",
        surface: "#fafdf9",
        "on-surface": "#191c1b",
        "surface-variant": "#dbe5df",
        "on-surface-variant": "#3f4944",
        "inverse-surface": "#2e312f",
        "inverse-on-surface": "#eff2ee",
      },
      dark: {
        primary: "#64dbb4",
        "on-primary": "#003829",
        "primary-container": "#00513c",
        "on-primary-container": "#81f8cf",
        secondary: "#b2ccc0",
        "on-secondary": "#1e352c",
        "secondary-container": "#344b42",
        "on-secondary-container": "#cee9dc",
        tertiary: "#a7cce1",
        "on-tertiary": "#0b3445",
        "tertiary-container": "#264b5d",
        "on-tertiary-container": "#c3e8fe",
        error: "#ffb4a9",
        "on-error": "#680003",
        "error-container": "#930006",
        "on-error-container": "#ffdad4",
        outline: "#8a938e",
        background: "#191c1b",
        "on-background": "#e1e3e0",
        surface: "#191c1b",
        "on-surface": "#e1e3e0",
        "surface-variant": "#3f4944",
        "on-surface-variant": "#bfc9c3",
        "inverse-surface": "#e1e3e0",
        "inverse-on-surface": "#191c1b",
      },
    },
    extend: {
      fontFamily: {
        brand: ["Crimson Pro", ...defaultTheme.fontFamily.serif],
        sans: ["Noto Sans", ...defaultTheme.fontFamily.sans],
      },
      lineHeight: {
        "leading-tight": "1.15rem",
        "leading-snug": "1.25rem",
      },
    },
  },
  plugins: [],
};