tailwind.config.js

/** @type {import('tailwindcss').Config} */
export const darkMode = ['class'];
export const content = ['./src/**/*.{ts,tsx}'];
export const prefix = '';
export const theme = {
  container: {
    center: true,
    padding: '2rem',
    screens: {
      '2xl': '1400px',
    },
  },
  extend: {
    colors: {
      red: '#E3534A',
      blue: '#1590D6',
      violet: '#7754DA',
      pink: '#FD8E8E',
      lightPink: '#FDEAEC',
      linePink: '#EEA1A6',
      skyblue: '#7BC0FF',
      lightSkyblue: '#E9EEF4',
      lineSkyblue: '#A1C5EE',
      deepRed: '#630731',
      deepBlue: '#22526E',
      black: '#000000',
      textGrey: '#3B3B3B',
      darkGrey: '#575757',
      buttonGrey: '#454545',
      commonGrey: '#A4A4A4',
      lightGrey: '#D9D9D9',
      backgroundGrey: '#F6F6F6',
      white: '#FFFFFF',
      border: '#A4A4A4',
      input: '#D9D9D9',
      ring: 'hsl(var(--ring))',
      background: '#FFFFFF',
      foreground: 'hsl(var(--foreground))',
      primary: {
        DEFAULT: 'hsl(var(--primary))',
        foreground: 'hsl(var(--primary-foreground))',
      },
      secondary: {
        DEFAULT: 'hsl(var(--secondary))',
        foreground: 'hsl(var(--secondary-foreground))',
      },
      destructive: {
        DEFAULT: 'hsl(var(--destructive))',
        foreground: 'hsl(var(--destructive-foreground))',
      },
      muted: {
        DEFAULT: 'hsl(var(--muted))',
        foreground: 'hsl(var(--muted-foreground))',
      },
      accent: {
        DEFAULT: 'hsl(var(--accent))',
        foreground: 'hsl(var(--accent-foreground))',
      },
      popover: {
        DEFAULT: 'hsl(var(--popover))',
        foreground: 'hsl(var(--popover-foreground))',
      },
      card: {
        DEFAULT: 'hsl(var(--card))',
        foreground: 'hsl(var(--card-foreground))',
      },
    },
    borderRadius: {
      lg: 'var(--radius)',
      md: 'calc(var(--radius) - 2px)',
      sm: 'calc(var(--radius) - 4px)',
    },
    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' },
      },
    },
    animation: {
      'accordion-down': 'accordion-down 0.2s ease-out',
      'accordion-up': 'accordion-up 0.2s ease-out',
    },
  },
};