windi.config.ts 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import { defineConfig } from 'windicss/helpers'
  2. import plugin from 'windicss/plugin'
  3. function range(size, startAt = 1) {
  4. return Array.from(Array(size).keys()).map((i) => i + startAt)
  5. }
  6. export default defineConfig({
  7. extract: {
  8. include: ['src/**/*.{vue,html,jsx,tsx}'],
  9. exclude: ['node_modules', '.git']
  10. },
  11. darkMode: 'class',
  12. attributify: false,
  13. theme: {
  14. extend: {
  15. backgroundColor: {
  16. // 暗黑背景色
  17. 'v-dark': 'var(--dark-bg-color)'
  18. }
  19. // screens: {
  20. // sm: '768px',
  21. // md: '992px',
  22. // lg: '1200px',
  23. // xl: '1920px'
  24. // }
  25. }
  26. // height: {
  27. // ...range(50).map((i) => `h-${i}px`)
  28. // },
  29. // margin: {
  30. // // ...range(50).map((i) => `mt-${i}px`),
  31. // // ...range(50).map((i) => `mr-${i}px`),
  32. // // ...range(50).map((i) => `mb-${i}px`),
  33. // // ...range(50).map((i) => `ml-${i}px`)
  34. // }
  35. },
  36. plugins: [
  37. plugin(({ addComponents }) => {
  38. const obj = {}
  39. range(50).map((i) => {
  40. obj[`.border-top-${i}`] = {
  41. borderTopWidth: `${i}px`
  42. }
  43. obj[`.border-left-${i}`] = {
  44. borderLeftWidth: `${i}px`
  45. }
  46. obj[`.border-right-${i}`] = {
  47. borderRightWidth: `${i}px`
  48. }
  49. obj[`.border-bottom-${i}`] = {
  50. borderBottomWidth: `${i}px`
  51. }
  52. })
  53. addComponents({
  54. '.hover-tigger': {
  55. display: 'flex',
  56. height: '100%',
  57. padding: '1px 10px 0',
  58. cursor: 'pointer',
  59. alignItems: 'center',
  60. transition: 'background var(--transition-time-02)',
  61. '&:hover': {
  62. backgroundColor: 'var(--top-header-hover-color)'
  63. }
  64. },
  65. '.dark .hover-tigger': {
  66. '&:hover': {
  67. backgroundColor: 'var(--el-bg-color-overlay)'
  68. }
  69. },
  70. ...obj
  71. })
  72. })
  73. ]
  74. })