fis_web_site/tailwind.config.js

const { blackA, mauve, violet } = require('@radix-ui/colors');
/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      letterSpacing: {
        'widest-cn': 'var(--tracking-widest)',
      },
      lineHeight: {
        'loose-cn': 'var(--leading-loose)',
      },
      maxHeight: {
        '20vh': '20vh',
        '70vh': '70vh',
        // 添加其他需要的值
      },
      dropShadow: {
        text: '0 10px 8px rgb(0 0 0 / 0.8)',
        mobile: '0 2px 2px rgb(255 255 255 / 0.8)',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
        'gradient-text': 'linear-gradient(to bottom, #F0F0F0, #D6F3F3)',
      },
      backgroundColor: {
        'blue-500': 'rgb(61, 146, 252)',
      },
      textColor: {
        'blue-500': 'rgb(61, 146, 252)',
        'gradient-text': 'linear-gradient(to right, #FF0000, #00FF00)',
      },
      colors: {
        ...blackA,
        ...mauve,
        ...violet,
      },
      keyframes: {
        slideUpAndFade: {
          from: { opacity: 0, transform: 'translateY(600px)' },
          to: { opacity: 1, transform: 'translateY(0)' },
        },
        slideRightAndFade: {
          from: { opacity: 0, transform: 'translateX(-2px)' },
          to: { opacity: 1, transform: 'translateX(0)' },
        },
        slideDownAndFade: {
          from: { opacity: 0, transform: 'translateY(-200px)' },
          to: { opacity: 1, transform: 'translateY(0)' },
        },
        slideLeftAndFade: {
          from: { opacity: 0, transform: 'translateX(2px)' },
          to: { opacity: 1, transform: 'translateX(0)' },
        },
        slideLeftFromOut: {
          from: { opacity: 0, transform: 'translateX(1000px)' },
          to: { opacity: 1, transform: 'translateX(0)' },
        },
        hide: {
          from: { opacity: 1 },
          to: { opacity: 0 },
        },
        slideIn: {
          from: {
            transform: 'translateX(calc(100% + var(--viewport-padding)))',
          },
          to: { transform: 'translateX(0)' },
        },
        swipeOut: {
          from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
          to: { transform: 'translateX(calc(100% + var(--viewport-padding)))' },
        },
        displayFromTransparent: {
          from: { opacity: 0 },
          to: { opacity: 1 },
        },
      },
      animation: {
        hide: 'hide 100ms ease-in',
        slideIn: 'slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
        swipeOut: 'swipeOut 100ms ease-out',
        slideUpAndFade: 'slideUpAndFade 3000ms cubic-bezier(0.16, 0.8, 0.3, 1)',
        slideRightAndFade:
          'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
        slideDownAndFade:
          'slideDownAndFade 600ms cubic-bezier(0.16, 1, 0.3, 1)',
        slideLeftAndFade:
          'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
        slideLeftFromOut:
          'slideLeftFromOut 1500ms cubic-bezier(0.16, 1, 0.3, 1)',
        displayFromTransparent:
          'displayFromTransparent 1000ms cubic-bezier(0.16, 1, 0.3, 1)',
      },
    },
  },
  plugins: [require('tailwindcss-animation-delay')],
};