tailwind.config.js

const myColors = require('./src/constant/MyColors');

module.exports = {
  content: ['./src/pages/plugin/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      screens: {
        dxl: '1536px',
      },
      colors: {
        red: myColors.ChineseColors.red,
        purple: myColors.ChineseColors.purple,
        blue: myColors.ChineseColors.blue,
        yellow: myColors.ChineseColors.yellow,
        gray: myColors.ChineseColors.gray,
        indigo: myColors.ChineseColors.indigo,
        green: myColors.ChineseColors.green,
        custom: {
          back: 'var(--color-bg)',
          cardBg: 'var(--color-card-bg)',
          bd: 'var(--color-border-color)', // '#ec2c64',
          base: 'var(--color-base)',
          txt: {
            base: 'var(--color-text-color)',
            soft: 'var(--color-text-soft)',
          },
          disabled: 'var(--color-disabled)',
        },
      },
      keyframes: {
        'fly-from-left': {
          from: {
            transform: 'translateY(15rem) rotate(15deg)',
            opacity: 0,
          }
        }
      },
      animation: {
        'fly-from-left': 'fly-from-left 0.5s 0s ease both',
      },
      boxShadow: {
        innerMd: 'inset 3px 3px 6px #ccdbe8, inset -3px -3px 6px 1px rgba(255, 255, 255, 0.5)',
        neon: '0 0 2px 3px var(--color-base)'
      },
    },
  },
  plugins: [],
}