Skip to content

Tailwind CSS

Tailwind CSS 是一个实用性优先的 CSS 框架,用于快速构建自定义设计。当前项目使用的是 Tailwind CSS v4

配置

项目当前不再通过 tailwind.config.* 文件维护 Tailwind 配置,主题与扫描范围都统一放在 CSS 与共享 Vite 配置中。

  • 主题入口:internal/tailwind-config/src/theme.css
  • Vite 集成:internal/vite-config

global.css 中你会看到当前项目使用的 Tailwind CSS v4 指令,例如:

  • @source
  • @custom-variant
  • @theme
  • @theme inline
  • @utility

包使用 Tailwind CSS 的方式

当前项目不会根据某个包下是否存在 tailwind.config.mjs 来决定是否启用 Tailwind CSS。

应用和包统一复用 @vben/vite-config,并由该配置接入 @tailwindcss/vite。Tailwind 的扫描范围则统一在 @vben/tailwind-config 对应的 internal/tailwind-config/src/theme.css 中维护。

包使用 Tailwind CSS 的说明

如果你是纯粹的 SDK 包,不需要使用 Tailwind CSS,则无需额外增加旧版 tailwind.config.* 文件。

Vue SFC 中的 @apply

项目对 Vue 单文件组件中的 @apply 做了统一处理,相关逻辑位于:

  • internal/vite-config/src/plugins/tailwind-reference.ts

当组件样式中使用 @apply 时,会自动注入 @reference "@vben/tailwind-config/theme",一般不需要手动补充。

贡献者

The avatar of contributor named as vben vben
The avatar of contributor named as xingyu xingyu
The avatar of contributor named as xingyu4j xingyu4j
The avatar of contributor named as PIPEDREA_WZJ PIPEDREA_WZJThe avatar of contributor named as vince vince

页面历史

基于 MIT 许可发布.