windi.config.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import { defineConfig } from 'windicss/helpers'
  2. const typography = require('windicss/plugin/typography')
  3. const lineClamp = require('windicss/plugin/line-clamp')
  4. export default defineConfig({
  5. darkMode: 'class', // or 'media'
  6. theme: {
  7. container: {
  8. center: true,
  9. },
  10. screens: {
  11. sm: '320px',
  12. tiny: '576px',
  13. md: '768px',
  14. lg: '930px',
  15. xl: '1024px',
  16. '2xl': '1280px',
  17. '3xl': '1536px'
  18. },
  19. extend: {
  20. colors: {
  21. brand: {
  22. /** 品牌色/主色 */
  23. 0: '#1460F3',
  24. /** 品牌色/H1 */
  25. 1: '#18191B',
  26. /** 品牌色/H2 */
  27. 2: '#43474D',
  28. /** 品牌色/H3 */
  29. 3: '#6A6F77',
  30. /** 品牌色/H4 */
  31. 4: '#AAAEB2',
  32. /** 品牌色/H5 */
  33. 5: '#BABABA'
  34. }
  35. },
  36. lineHeight: {
  37. 'snug': '1.33',
  38. 'normal': '1.50',
  39. 'relaxed': '1.56'
  40. },
  41. fontSize: {
  42. 'xs': ['14px', '18px'],
  43. 'sm': ['16px', '24px'],
  44. 'tiny': ['18px', '28px'],
  45. 'base': ['24px', '32px'],
  46. 'lg': ['30px', '40px'],
  47. 'xl': ['36px', '48px'],
  48. '2xl': ['50px', '64px']
  49. }
  50. }
  51. },
  52. plugins: [typography, lineClamp]
  53. })