tailwind.config.cjs 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /** @type {import('tailwindcss').Config} */
  2. module.exports = {
  3. content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  4. theme: {
  5. colors: {
  6. white: 'var(--color-white)',
  7. primary: {
  8. DEFAULT: 'var(--el-color-primary)',
  9. 'light-3': 'var(--el-color-primary-light-3)',
  10. 'light-5': 'var(--el-color-primary-light-5)',
  11. 'light-7': 'var(--el-color-primary-light-7)',
  12. 'light-8': 'var(--el-color-primary-light-8)',
  13. 'light-9': 'var(--el-color-primary-light-9)',
  14. 'dark-2': 'var(--el-color-primary-dark-2)',
  15. },
  16. success: 'var(--el-color-success)',
  17. warning: 'var(--el-color-warning)',
  18. danger: 'var(--el-color-danger)',
  19. error: 'var(--el-color-error)',
  20. info: 'var(--el-color-info)',
  21. body: 'var(--el-bg-color)',
  22. page: 'var(--el-bg-color-page)',
  23. 'tx-primary': 'var(--el-text-color-primary)',
  24. 'tx-regular': 'var(--el-text-color-regular)',
  25. 'tx-secondary': 'var(--el-text-color-secondary)',
  26. 'tx-placeholder': 'var(--el-text-color-placeholder)',
  27. 'tx-disabled': 'var(--el-text-color-disabled)',
  28. br: 'var(--el-border-color)',
  29. 'br-light': 'var(--el-border-color-light)',
  30. 'br-extra-light': 'var(--el-border-color-extra-light)',
  31. 'br-dark': 'var( --el-border-color-dark)',
  32. fill: 'var(--el-fill-color)',
  33. 'fill-light': 'var(--el-fill-color-light)',
  34. 'fill-lighter': 'var(--el-fill-color-lighter)',
  35. mask: 'var(--el-mask-color)',
  36. },
  37. fontFamily: {
  38. sans: ['PingFang SC', 'Arial', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif'],
  39. },
  40. boxShadow: {
  41. DEFAULT: 'var(--el-box-shadow)',
  42. light: 'var(--el-box-shadow-light)',
  43. lighter: 'var(--el-box-shadow-lighter)',
  44. dark: 'var(--el-box-shadow-dark)',
  45. },
  46. svg: {
  47. display: 'inline',
  48. 'vertical-align': 'baseline',
  49. },
  50. fontSize: {
  51. xs: 'var(--el-font-size-extra-small)',
  52. sm: 'var( --el-font-size-small)',
  53. base: 'var( --el-font-size-base)',
  54. lg: 'var( --el-font-size-medium)',
  55. xl: 'var( --el-font-size-large)',
  56. '2xl': 'var( --el-font-size-extra-large)',
  57. '3xl': '20px',
  58. '4xl': '24px',
  59. '5xl': '28px',
  60. '6xl': '30px',
  61. '7xl': '36px',
  62. '8xl': '48px',
  63. '9xl': '60px',
  64. },
  65. spacing: {
  66. px: '1px',
  67. 0: '0px',
  68. 0.5: '2px',
  69. 1: '4px',
  70. 1.5: '6px',
  71. 2: '8px',
  72. 2.5: '10px',
  73. 3: '12px',
  74. 3.5: '14px',
  75. 4: '16px',
  76. 5: '20px',
  77. 6: '24px',
  78. 7: '28px',
  79. 8: '32px',
  80. 9: '36px',
  81. 10: '40px',
  82. 11: '44px',
  83. 12: '48px',
  84. 14: '56px',
  85. 16: '64px',
  86. 20: '80px',
  87. 24: '96px',
  88. 28: '112px',
  89. 32: '128px',
  90. 36: '144px',
  91. 40: '160px',
  92. 44: '176px',
  93. 48: '192px',
  94. 52: '208px',
  95. 56: '224px',
  96. 60: '240px',
  97. 64: '256px',
  98. 72: '288px',
  99. 80: '320px',
  100. 96: '384px',
  101. },
  102. lineHeight: {
  103. none: '1',
  104. tight: '1.25',
  105. snug: '1.375',
  106. normal: '1.5',
  107. relaxed: '1.625',
  108. loose: '2',
  109. 3: '12px',
  110. 4: '16px',
  111. 5: '20px',
  112. 6: '24px',
  113. 7: '28px',
  114. 8: '32px',
  115. 9: '36px',
  116. 10: '40px',
  117. },
  118. },
  119. };