tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    screens: {
      sm: "375px",
      md: "744px",
      lg: "1024px",
      xl: "1280px",
    },
    extend: {
      keyframes: {
        "slide-in-left": {
          "0%": { transform: "translateX(-50px)", opacity: "0" },
          "100%": { transform: "translateX(0)", opacity: "1" },
        },
        "slide-in-right": {
          "0%": { transform: "translateX(50px)", opacity: "0" },
          "100%": { transform: "translateX(0)", opacity: "1" },
        },
      },
      animation: {
        "slide-in-left": "slide-in-left 1s ease-out",
        "slide-in-right": "slide-in-right 1s ease-out",
      },
      translate: {
        "-full": "-100%", // 'translate-x--full': '-100%'
      },
      colors: {
        brand: {
          primary: "#10B981",
          secondary: "#34D399",
          tertiary: "#A3E635",
        },
        point: {
          purple: "#A855F7",
          blue: "#3B82F6",
          cyan: "#06B6D4",
          pink: "#EC4899",
          rose: "#F43F5E",
          orange: "#F97316",
          yellow: "#EAB308",
          whiteGreen: "#43c694",
          grayGreen: "43c694",
        },
        background: {
          primary: "var(--background-primary)",
          secondary: "var(--background-secondary)",
          third: "var(--background-third)",
          tertiary: "var(--background-tertiary)",
          inverse: "var(--background-inverse)",
        },
        interaction: {
          inactive: "#94A3B8",
          hover: "#059669",
          pressed: "#047857",
          focus: "#10B981",
        },
        border: {
          primary: "rgb(var(--border-primary) / <alpha-value>)",
        },
        text: {
          primary: "var(--text-primary)",
          secondary: "var(--text-secondary)",
          tertiary: "var(--text-tertiary)",
          default: "var(--text-default)",
          inverse: "var(--text-inverse)",
          disabled: "var(--text-disabled)",
        },
        status: {
          danger: "#DC2626",
        },
        icon: {
          primary: "#64748B",
          inverse: "#F8FAFC",
          brand: "#10B981",
        },
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
        gradient: "linear-gradient(to right, #10B981, #A3E635)",
      },
      fontFamily: { Pretendard: ["Pretendard", "ui-sans-serif", "system-ui"] },
    },
  },
  plugins: [
    function ({ addBase }: any) {
      addBase({
        "*": {
          "&::-webkit-scrollbar": {
            width: "7px",
            height: "7px",
          },
          "&::-webkit-scrollbar-thumb": {
            backgroundColor: "var(--point-whiteGreen)",
            borderRadius: "10px",
          },
          "&::-webkit-scrollbar-track": {
            backgroundColor: "var(--background-primary)",
          },
        },
      });
    },
  ],
};
export default config;