werefox-cafe/src/info/tailwind.config.js

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        nerd: ["DejaVuSansMono"],
      },
      colors: {
        "ada-werefox-cyan": {
          light: "#AAFFFF",
          DEFAULT: "#50FFFF",
          dark: "#008888",
        },
        "skye-werefox-blue": {
          light: "#94C2FF",
          DEFAULT: "#75B1FF",
          dark: "#0052B8",
          darker: "#00377A",
          darkest: "#00326B",
        },
        "skye-werefox-pink": {
          DEFAULT: "#FF84CA",
          dark: "#9E0054",
          darker: "#8A0040",
          darkest: "#75003F",
        },
        "skye-werefox-grey": {
          lightest: "#EEE",
          lighter: "#DBDBDB",
          light: "#CCC",
          DEFAULT: "#424242",
          dark: "#242424",
          darker: "#121212",
        },
        "alice-werefox-red": {
          light: "#FFCCCF",
          DEFAULT: "#FF8F94",
          dark: "#800008",
          darker: "#550006",
          darkest: "#7A0000",
        },
        "alice-werefox-blue": {
          DEFAULT: "#B6A3FF",
          dark: "#3300FF",
          darker: "#2C00DB",
          darkest: "#2700C2",
        },
      },
      flex: {
        5: "5 5 0%",
      },
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(-1deg)" },
          "50%": { transform: "rotate(1deg)" },
        },
        jiggle: {
          "0%, 100%": { transform: "rotate(0deg)" },
          "25%": { transform: "rotate(-10deg)" },
          "75%": { transform: "rotate(10deg)" },
        },
        yip: {
          "0%, 100%": { transform: "scale(1, 1)" },
          "50%": { transform: "scale(1.01, 1.01)" },
        },
      },
      animation: {
        wiggle: "wiggle 7s ease-in-out infinite",
        jiggle: "jiggle 5s cubic-bezier(0.75,0.25,0.25,0.75) infinite",
        yip: "yip 0.1s ease-in-out",
      },
    },
  },
  variants: {
    extend: {
      brightness: ["hover", "dark"],
      ringColor: ["hover", "dark", "active", "group-hover"],
      animation: ["hover", "focus", "group-hover"],
    },
  },
  plugins: [],
};