uno.config.ts 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. // uno.config.ts
  2. import {
  3. defineConfig,
  4. presetAttributify,
  5. presetIcons,
  6. transformerDirectives,
  7. transformerVariantGroup,
  8. } from 'unocss'
  9. import { presetUni } from '@uni-helper/unocss-preset-uni'
  10. export default defineConfig({
  11. presets: [
  12. // @ts-expect-error 类型兼容性
  13. presetUni(),
  14. // 支持css class属性化,eg: `<button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white">attributify Button</button>`
  15. presetAttributify(),
  16. // 支持图标,需要搭配图标库,eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
  17. presetIcons({
  18. scale: 1.2,
  19. warn: true,
  20. extraProperties: {
  21. display: 'inline-block',
  22. 'vertical-align': 'middle',
  23. },
  24. }),
  25. ],
  26. /**
  27. * 自定义快捷语句
  28. * @see https://github.com/unocss/unocss#shortcuts
  29. */
  30. shortcuts: [['center', 'flex justify-center items-center']],
  31. transformers: [
  32. // 启用 @apply 功能
  33. transformerDirectives(),
  34. // 启用 () 分组功能
  35. // 支持css class组合,eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
  36. transformerVariantGroup(),
  37. ],
  38. })