tailwind.config.ts 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. const tailwindV3Spacing = {
  2. '0': '0px',
  3. '0.5': '0.125rem',
  4. '1': '0.25rem',
  5. '1.5': '0.375rem',
  6. '2': '0.5rem', // ml-2 对应值
  7. '2.5': '0.625rem',
  8. '3': '0.75rem',
  9. '3.5': '0.875rem',
  10. '4': '1rem', // mb-4 对应值(重点修复)
  11. '5': '1.25rem',
  12. '6': '1.5rem',
  13. '7': '1.75rem',
  14. '8': '2rem',
  15. '9': '2.25rem',
  16. '10': '2.5rem',
  17. '11': '2.75rem',
  18. '12': '3rem',
  19. '14': '3.5rem',
  20. '16': '4rem',
  21. '20': '5rem',
  22. '24': '6rem',
  23. '28': '7rem',
  24. '32': '8rem',
  25. '36': '9rem',
  26. '40': '10rem',
  27. '44': '11rem',
  28. '48': '12rem',
  29. '52': '13rem',
  30. '56': '14rem',
  31. '60': '15rem',
  32. '64': '16rem',
  33. '72': '18rem',
  34. '80': '20rem',
  35. '96': '24rem',
  36. }
  37. // tailwind.config.ts
  38. // 删掉这行:import type { Config } from 'tailwindcss'
  39. // 手动定义 Tailwind v4 兼容的 Config 类型(覆盖 spacing/colors 等核心配置)
  40. interface TailwindConfig {
  41. content: string[];
  42. safelist?: string[];
  43. theme: {
  44. extend: {
  45. spacing?: Record<string, string>;
  46. colors?: Record<string, string | Record<string, string>>;
  47. boxShadow?: Record<string, string>;
  48. // 如需其他配置(如 fontFamily、screens),按需补充
  49. };
  50. };
  51. plugins?: any[];
  52. }
  53. // 配置对象(符合自定义的 TailwindConfig 类型)
  54. const config: TailwindConfig = {
  55. content: [
  56. './app/**/*.{js,ts,jsx,tsx,mdx}',
  57. './pages/**/*.{js,ts,jsx,tsx,mdx}',
  58. './components/**/*.{js,ts,jsx,tsx,mdx}',
  59. ],
  60. theme: {
  61. extend: {
  62. spacing: tailwindV3Spacing,
  63. colors: {
  64. blue: {
  65. 50: '#f0f7ff',
  66. 600: '#1677ff',
  67. },
  68. },
  69. },
  70. },
  71. plugins: [],
  72. };
  73. export default config;