tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  darkMode: "class",
  theme: {
    container: {
      center: true,
      padding: "1rem",
    },
    extend: {
      colors: {
        transparent: "transparent",
        white: "#fff",
        black: {
          DEFAULT: "#000",
          50: "#f7f8f8",
          100: "#f1f2f3",
          200: "#d9dcde",
          300: "#b7bdc2",
          400: "#9099a0",
          500: "#54555F",
          600: "#3E3F4B",
          700: "#343541",
          800: "#20232E",
          900: "#141723",
        },
        purple: {
          50: "#f9f5ff",
          100: "#f1e7ff",
          200: "#e6d4ff",
          300: "#d2b2ff",
          400: "#b680ff",
          DEFAULT: "#a15bfc",
          600: "#842eef",
          700: "#701dd3",
          800: "#601dac",
          900: "#4f198a",
          950: "#330467",
        },
        green: {
          50: "#edfcf5",
          100: "#d3f8e5",
          200: "#aceed0",
          300: "#75e0b7",
          DEFAULT: "#4acd9e",
          500: "#1aaf7f",
          600: "#0e8d67",
          700: "#0b7155",
          800: "#0b5a44",
          900: "#0a4a39",
          950: "#042a21",
        },
  
        blue: {
          50: "#eff8ff",
          100: "#dbeffe",
          200: "#bfe4fe",
          300: "#94d3fc",
          400: "#61baf9",
          DEFAULT: "#3d9cf5",
          600: "#267eea",
          700: "#1e67d7",
          800: "#1f54ae",
          900: "#1f4889",
          950: "#172d54",
        },
        red: {
          50: "#fef4f2",
          100: "#ffe6e1",
          200: "#ffd0c8",
          300: "#ffb0a2",
          400: "#fd826c",
          DEFAULT: "#f5593d",
          600: "#e23e20",
          700: "#bf3016",
          800: "#9d2b17",
          900: "#822a1a",
          950: "#471208",
        },
        orange: {
          50: "#fef8ee",
          100: "#feeed6",
          200: "#fbdaad",
          300: "#f9be78",
          400: "#f5963d",
          DEFAULT: "#f27b1d",
          600: "#e36113",
          700: "#bd4911",
          800: "#963a16",
          900: "#793215",
          950: "#411709",
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};