tailwind.config.js

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

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      fontFamily: {
        sans: ["JetBrains Mono", ...defaultTheme.fontFamily.sans],
      },
      gridTemplateColumns: {
        16: "repeat(16, minmax(0, 1fr))",
      },
      gridColumnStart: {
        13: "13",
        14: "14",
        15: "15",
        16: "16",
      },
      colors: {
        "surface-tint": "var(--md-sys-color-surface-tint)",
        "surface-tint-color": "var(--md-sys-color-surface-tint-color)",
        "on-error-container": "var(--md-sys-color-on-error-container)",
        "on-error": "var(--md-sys-color-on-error)",
        "error-container": "var(--md-sys-color-error-container)",
        "on-tertiary-container": "var(--md-sys-color-on-tertiary-container)",
        "on-tertiary": "var(--md-sys-color-on-tertiary)",
        "tertiary-container": "var(--md-sys-color-tertiary-container)",
        tertiary: "var(--md-sys-color-tertiary)",
        shadow: "var(--md-sys-color-shadow)",
        error: "var(--md-sys-color-error)",
        outline: "var(--md-sys-color-outline)",
        "on-background": "var(--md-sys-color-on-background)",
        background: "var(--md-sys-color-background)",
        "inverse-on-surface": "var(--md-sys-color-inverse-on-surface)",
        "inverse-surface": "var(--md-sys-color-inverse-surface)",
        "on-surface-variant": "var(--md-sys-color-on-surface-variant)",
        "on-surface": "var(--md-sys-color-on-surface)",
        "surface-variant": "var(--md-sys-color-surface-variant)",
        surface: "var(--md-sys-color-surface)",
        "on-secondary-container": "var(--md-sys-color-on-secondary-container)",
        "on-secondary": "var(--md-sys-color-on-secondary)",
        "secondary-container": "var(--md-sys-color-secondary-container)",
        secondary: "var(--md-sys-color-secondary)",
        "inverse-primary": "var(--md-sys-color-inverse-primary)",
        "on-primary-container": "var(--md-sys-color-on-primary-container)",
        "on-primary": "var(--md-sys-color-on-primary)",
        "primary-container": "var(--md-sys-color-primary-container)",
        primary: "var(--md-sys-color-primary)",
      },
    },
  },
  plugins: [],
};