worlabel/frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
import tailwindcssAnimate from 'tailwindcss-animate';

export default {
  darkMode: ['class'],
  content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', './stories/**/*.{ts,tsx}'],
  prefix: '',
  theme: {
    fontFamily: {
      sans: [
        'Pretendard Variable',
        'Pretendard',
        '-apple-system',
        'BlinkMacSystemFont',
        'system-ui',
        'Roboto',
        'Helvetica Neue',
        'Segoe UI',
        'Apple SD Gothic Neo',
        'Noto Sans KR',
        'Malgun Gothic',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'sans-serif',
      ],
    },
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      padding: {
        0.5: '0.125rem',
        1.5: '0.375rem',
      },
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: '#000',
        white: '#fff',
        gray: {
          50: '#fafafa',
          100: '#f5f5f5',
          200: '#e6e6e6',
          300: '#d9d9d9',
          400: '#b3b3b3',
          500: '#757575',
          600: '#444444',
          700: '#383838',
          800: '#2c2c2c',
          900: '#1e1e1e',
          1000: '#111111',
        },
        primary: '#17f',
        primaryHover: '#06c',
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
        'weight-loop': {
          '0%': { 'font-weight': '100' },
          '50%': { 'font-weight': '900' },
          '100%': { 'font-weight': '100' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        'weight-loop': 'weight-loop 5s infinite',
      },
    },
  },
  plugins: [tailwindcssAnimate],
};