tailwind.config.js

// tailwind.config.js
module.exports = {
  purge: {
    enabled: false,
    content: ['./packages/**/**/*.tsx'],
  },
  theme: {
    themeVariants: ['dark'],
    colors: {
      transparent: 'transparent',
      black: '#16171A',
      white: '#FFFFFF',
      primary: '#7B16FF',
      secondary: '#24292E',
      hello: 'red',
      purple: {
        100: '#F8F6FD',
        200: '#E8E5FF',
        300: '#DDD9FF',
        400: '#5856D6',
        600: '#7e3af2',
      },
      red: {
        100: '#ea4335',
        200: '#fbd5d5',
        300: '#f8b4b4',
        500: '#85000C',
      },
      gray: {
        default: '#67717A',
        100: '#FAFAFA',
        200: '#F6F7F8',
        300: '#EBECED',
        400: '#DFE7EF',
        500: '#a0aec0',
        600: '#718096',
        700: '#4a5568',
        800: '#2d3748',
        900: '#1a202c',
      },
    },
  },
  variants: {
    backgroundColor: [
      'hover',
      'focus',
      'active',
      'odd',
      'dark',
      'dark:hover',
      'dark:focus',
      'dark:active',
      'dark:odd',
    ],
    display: ['responsive', 'dark'],
    textColor: [
      'focus-within',
      'hover',
      'active',
      'dark',
      'dark:focus-within',
      'dark:hover',
      'dark:active',
    ],
    zIndex: {
      '60': '60',
    },
    placeholderColor: ['focus', 'dark', 'dark:focus'],
    borderColor: ['focus', 'hover', 'dark', 'dark:focus', 'dark:hover'],
    divideColor: ['dark'],
    boxShadow: ['focus', 'dark:focus'],
  },
  plugins: [require('tailwindcss-multi-theme')],
};