tailwind.config.js

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  darkMode: "class",
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {
      colors: {
        "vivid-sky-blue": "#12CCFF",
        "bleu-de-france": "#2a8cf5",
        "blue-ryb": "#414bea",
        "han-purple": "#590be0",
        "space-cadet": {
          DEFAULT: "0F1137",
          // 900: "#060112",
          // 800: "#0D0731",
          // 700: "#100D3F",
          // 600: "#131547",
          // 500: "#1B2254",
          // 400: "#2B3668",
          // 300: "#4A5684",
          // 200: "#ABB3D9",
          // 100: "#E0E5FA",
          // 50: "#F4F5FC",
          // 900: "#060112",
          // 800: "#0C062A",
          // 700: "#120E45",
          // 600: "#151850",
          // 500: "#1E255D",
          // 400: "#2A356D",
          // 300: "#42518C",
          // 200: "#909BCF",
          // 100: "#E0E5FA",
          // 50: "#F7F9FF",
          1000: "#060112",
          900: "#0E0C27",
          800: "#1E1E3B",
          700: "#343955",
          600: "#454C69",
          500: "#646E8B",
          400: "#95A4BA",
          300: "#CBDAE1",
          200: "#E2F0F0",
          100: "#F1F9F6",
          50: "#F8FCFC",
        },
        "risd-blue": {
          DEFAULT: "#0055ff",
          50: "#e8f8ff",
          100: "#d5f2ff",
          200: "#b3e5ff",
          300: "#85d1ff",
          400: "#56aeff",
          500: "#2f8aff",
          600: "#0c5fff",
          700: "#0055ff",
          800: "#0448D9",
          900: "#023FCC",
        },
        "vivid-indigo": {
          DEFAULT: "#4000ff",
          50: "#f1f0ff",
          100: "#e6e4ff",
          200: "#d0cdff",
          300: "#afa6ff",
          400: "#8873ff",
          500: "#633bff",
          600: "#5114ff",
          700: "#4000ff",
          800: "#3601d6",
          900: "#2e03af",
        },
      },
      fontFamily: {
        sans: ["Work Sans", ...defaultTheme.fontFamily.sans],
        // heading: ["Syne", ...defaultTheme.fontFamily.sans],
        heading: ["Hepta Slab", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};