tailwind.config.js

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

module.exports = {
  content: [
    "./pages/**/*.{ts,tsx,js,jsx}",
    "./pages/*.{ts,tsx,js,jsx}",
    "./src/components/**/*.{ts,tsx,js,jsx}",
    "./src/components/*.{ts,tsx,js,jsx}",
    "./src/stories/**/*.{ts,tsx}",
  ],
  theme: {
    colors: {
      primary: "#BEA48D",
      secondary: "#F5F5F5",
      thritery: "#F3ECE8",
      white: "white",
      black: "black",
      green: "green",
    },

    extend: {
      colors: {
        primary: {
          200: "#BEA48D",
          400: "#8D7B69",
          600: "#8D7B69",
        },
        secondary: {
          200: "#F5F5F5",
          300: "#d6d3d1",
          400: "gray",
          900: "#27272a",
        },
        blue: {
          950: "#17275c",
        },
      },
      letterSpacing: {
        widest: ".50em",
      },
      dropShadow: {
        "3xl": "0 35px 35px rgba(0, 0, 0, 0.25)",
        "4xl": ["0 25px 45px rgba(0, 0, 0, 0.25)"],
      },
      animation: {
        cursor: "cursor .6s linear infinite alternate",
        type: "type 12.5s ease-out .8s 1 normal both",
      },
      keyframes: {
        type: {
          "0%": { width: "0ch" },
          "1%, 2%": { width: "1ch" },
          "3%, 4%": { width: "2ch" },
          "5%, 6%": { width: "3ch" },
          "7%, 8%": { width: "4ch" },
          "9%, 10%": { width: "5ch" },
          "11%, 12%": { width: "6ch" },
          "13%, 14%": { width: "7ch" },
          "15%, 16%": { width: "8ch" },
          "17%, 18%": { width: "9ch" },
          "19%, 20%": { width: "10ch" },
          "21%, 22%": { width: "11ch" },
          "23%, 24%": { width: "12ch" },
          "25%, 26%": { width: "13ch" },
          "27%, 28%": { width: "14ch" },
          "29%, 30%": { width: "15ch" },
          "31%, 32%": { width: "16ch" },
          "33%, 34%": { width: "17ch" },
          "35%, 36%": { width: "18ch" },
          "37%, 38%": { width: "19ch" },
          "39%, 40%": { width: "20ch" },
          "41%, 42%": { width: "21ch" },
          "43%, 44%": { width: "22ch" },
          "45%, 46%": { width: "23ch" },
          "47%, 48%": { width: "24ch" },
          "49%, 50%": { width: "25ch" },
          "51%, 52%": { width: "26ch" },
          "53%, 54%": { width: "27ch" },
          "55%, 56%": { width: "28ch" },
          "57%, 58%": { width: "29ch" },
          "59%, 60%": { width: "30ch" },
          "61%, 62%": { width: "31ch" },
          "63%, 64%": { width: "32ch" },
          "65%, 66%": { width: "33ch" },
          "67%, 68%": { width: "34ch" },
          "69%, 70%": { width: "35ch" },
          "71%, 72%": { width: "36ch" },
          "73%, 74%": { width: "37ch" },
          "75%, 76%": { width: "38ch" },
          "77%, 78%": { width: "39ch" },
          "79%, 80%": { width: "40ch" },
          "81%, 82%": { width: "41ch" },
          "83%, 84%": { width: "42ch" },
          "85%, 86%": { width: "43ch" },
          "87%, 88%": { width: "44ch" },
          "89%, 90%": { width: "45ch" },
          "91%, 92%": { width: "46ch" },
          "93%, 94%": { width: "47ch" },
          "95%, 95%": { width: "48ch" },
          "97%, 98%": { width: "49ch" },
          "99%, 100%": { width: "50ch" },
        },
      },
    },

    plugins: [],
  },
};