tailwind.config.ts

import type { Config } from 'tailwindcss';
import plugin from 'tailwindcss/plugin';

const config: Config = {
  content: [
    './page/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  future: {
    hoverOnlyWhenSupported: true,
  },
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('selected', ['&:active:focus', '&:active:hover']);
    }),
  ],
  theme: {
    aspectRatio: {
      auto: 'auto',
      shorts: '8.95/16',
      'shorts-full': '9/16',
      square: '1/1',
      video: '16/8.95',
      'video-full': '16/9',
    },
    borderRadius: {
      0: '0px',
      4: '4px',
      8: '8px',
      16: '16px',
      full: '9999px',
    },
    borderWidth: {
      1: '1px',
      2: '2px',
      3: '3px',
    },
    boxShadow: {
      primary: '0px 4px 4px 0px rgba(70, 167, 235, 0.30)',
      'primary-slated': '0px 4px 8px 4px rgba(173, 210, 236, 0.28)',
    },
    colors: {
      black: '#474E53',
      'black-real': '#000000',
      'c-blue': '#3098E1',
      'c-gray': '#8D959B',
      'c-green': '#25CE68',
      'c-orange': '#EB8D48',
      'c-purple': '#9D44C7',
      'c-red': '#E13065',
      'c-yellow': '#F3C522',
      'gray-50': '#EEF4F8',
      'gray-100': '#E5EDF2',
      'gray-200': '#CDDAE4',
      'gray-300': '#C0CCD6',
      'gray-400': '#A6B2BB',
      'gray-500': '#8D959B',
      'primary-100': '#EDF7FF',
      'primary-200': '#D1ECFF',
      'primary-300': '#B4DBF8',
      'primary-400': '#72BBEE',
      'primary-500': '#3098E1',
      transparent: 'transparent',
      white: '#FFFFFF',
    },
    extend: {
      animation: {
        fade: 'fadeIn 0.5s',
      },
      backgroundImage: {
        'gradient-gray': 'linear-gradient(90deg, #8D959B 0%, #A8B8C3 100%)',
        'gradient-green': 'linear-gradient(90deg, #25CE68 0%, #4AE588 100%)',
        'gradient-orange': 'linear-gradient(90deg, #EB8D48 0%, #EBA776 100%)',
        'gradient-primary': 'linear-gradient(90deg, #3098E1 0%, #5EB6F5 100%)',
        'gradient-purple': 'linear-gradient(90deg, #9D44C7 0%, #C965F8 100%)',
        'gradient-red': 'linear-gradient(90deg, #E13065 0%, #FA85A8 100%)',
        'gradient-yellow': 'linear-gradient(90deg, #F3C522 0%, #FFD84F 100%)',
      },
      keyframes: {
        fadeIn: {
          from: { opacity: '0' },
          to: { opacity: '1' },
        },
      },
      screens: {
        lgx: '1072px',
        pointer: {
          raw: '(hover: hover) and (pointer: fine)',
        },
        xlgx: '1328px',
      },
    },
    fontSize: {
      12: ['12px', '14px'],
      14: ['14px', '17px'],
      16: ['16px', '19px'],
      18: ['18px', '21px'],
      20: ['20px', '24px'],
      22: ['22px', '26px'],
      24: ['24px', '29px'],
      28: ['28px', '33px'],
      32: ['32px', '38px'],
      36: ['36px', '43px'],
    },
    fontWeight: {
      400: '400',
      500: '500',
      600: '600',
      700: '700',
    },
    spacing: {
      0: '0',
      1: '1px',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
      10: '10px',
      12: '12px',
      14: '14px',
      16: '16px',
      18: '18px',
      20: '20px',
      22: '22px',
      24: '24px',
      28: '28px',
      32: '32px',
      36: '36px',
      40: '40px',
      48: '48px',
      64: '64px',
      72: '72px',
      'artistic-header-expanded-width-lg': 'calc(100% - 48px)',
      'artistic-header-height-lg': '68px',
      'artistic-header-height-md': '76px',
      'details-header-height': '56px',
    },
  },
};
export default config;