fastapi-svelte-template/frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Montserrat", "NotoColorEmoji"],
        serif: ["Lora", "NotoColorEmoji"],
        mono: ["SourceCodePro", "NotoColorEmoji"],
        accent: ["Kanit", "NotoColorEmoji"],
        emoji: ["NotoColorEmoji"],
      },
      colors: {
        transparent: "transparent",
        current: "currentColor",
        primary: {
          50:      "#D5E8EC",
          100:     "#9CCAD3",
          200:     "#4B9AAA",
          300:     "#326671",
          400:     "#1F4047",
          500:     "#0D1B1E",
          DEFAULT: "#0D1B1E",
          600:     "#0C191C",
          700:     "#070F11",
          800:     "#040809",
          900:     "#000000",
        },
        secondary: {
          50:      "#F3F7F5",
          100:     "#DBE6E2",
          200:     "#B6CDC5",
          300:     "#9EBDB2",
          400:     "#86AC9F",
          500:     "#6C9A8B",
          DEFAULT: "#6C9A8B",
          600:     "#5B8677",
          700:     "#4A6D61",
          800:     "#3A554B",
          900:     "#192420",
        },
        accent: {
          50:      "#FFF9EB",
          100:     "#FFEDC2",
          200:     "#FFE7AD",
          300:     "#FFDA85",
          400:     "#FFCE5C",
          500:     "#FFC233",
          DEFAULT: "#FFC233",
          600:     "#FFB60A",
          700:     "#E09D00",
          800:     "#A37200",
          900:     "#523900",
        },
        background: {
          50:      "#FFFFFF",
          100:     "#FFFFFF",
          200:     "#FFFFFF",
          300:     "#FFFFFF",
          400:     "#FFFFFF",
          500:     "#FCFCFC",
          DEFAULT: "#FCFCFC",
          600:     "#CCCCCC",
          700:     "#A3A3A3",
          800:     "#707070",
          900:     "#333333",
        },
        success: "#00CC00",
        warning: "#EDC000",
        failure: "#E40000",
      },
      screens: {
        '3xl': '1920px',
        '4xl': '3840px',
      }
    },
  },
  plugins: [],
}