tailwind.config.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. const { blackA, mauve, violet } = require('@radix-ui/colors');
  2. /** @type {import('tailwindcss').Config} */
  3. module.exports = {
  4. mode: 'jit',
  5. content: [
  6. './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
  7. './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  8. './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  9. './src/app-pages/**/*.{js,ts,jsx,tsx,mdx}',
  10. ],
  11. theme: {
  12. extend: {
  13. maxHeight: {
  14. '20vh': '20vh',
  15. '70vh': '70vh',
  16. // 添加其他需要的值
  17. },
  18. backgroundImage: {
  19. 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
  20. 'gradient-conic':
  21. 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
  22. },
  23. colors: {
  24. ...blackA,
  25. ...mauve,
  26. ...violet,
  27. },
  28. keyframes: {
  29. slideUpAndFade: {
  30. from: { opacity: 0, transform: 'translateY(2px)' },
  31. to: { opacity: 1, transform: 'translateY(0)' },
  32. },
  33. slideRightAndFade: {
  34. from: { opacity: 0, transform: 'translateX(-2px)' },
  35. to: { opacity: 1, transform: 'translateX(0)' },
  36. },
  37. slideDownAndFade: {
  38. from: { opacity: 0, transform: 'translateY(-2px)' },
  39. to: { opacity: 1, transform: 'translateY(0)' },
  40. },
  41. slideLeftAndFade: {
  42. from: { opacity: 0, transform: 'translateX(2px)' },
  43. to: { opacity: 1, transform: 'translateX(0)' },
  44. },
  45. hide: {
  46. from: { opacity: 1 },
  47. to: { opacity: 0 },
  48. },
  49. slideIn: {
  50. from: {
  51. transform: 'translateX(calc(100% + var(--viewport-padding)))',
  52. },
  53. to: { transform: 'translateX(0)' },
  54. },
  55. swipeOut: {
  56. from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
  57. to: { transform: 'translateX(calc(100% + var(--viewport-padding)))' },
  58. },
  59. },
  60. animation: {
  61. hide: 'hide 100ms ease-in',
  62. slideIn: 'slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
  63. swipeOut: 'swipeOut 100ms ease-out',
  64. slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
  65. slideRightAndFade:
  66. 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
  67. slideDownAndFade:
  68. 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
  69. slideLeftAndFade:
  70. 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
  71. },
  72. },
  73. },
  74. plugins: [],
  75. };