docs(@vben/docs): align guide docs with current tooling
This commit is contained in:
@@ -1,17 +1,38 @@
|
||||
# Tailwind CSS
|
||||
|
||||
[Tailwind CSS](https://tailwindcss.com/) 是一个实用性优先的CSS框架,用于快速构建自定义设计。
|
||||
[Tailwind CSS](https://tailwindcss.com/) 是一个实用性优先的 CSS 框架,用于快速构建自定义设计。当前项目使用的是 **Tailwind CSS v4**。
|
||||
|
||||
## 配置
|
||||
|
||||
项目的配置文件位于 `internal/tailwind-config` 下,你可以在这里修改 Tailwind CSS 的配置。
|
||||
项目当前不再通过 `tailwind.config.*` 文件维护 Tailwind 配置,主题与扫描范围都统一放在 CSS 与共享 Vite 配置中。
|
||||
|
||||
::: tip 包使用 tailwindcss 的限制
|
||||
- 主题入口:`packages/@core/base/design/src/css/global.css`
|
||||
- Vite 集成:`internal/vite-config`
|
||||
|
||||
当前只有对应的包下面存在 `tailwind.config.mjs` 文件才会启用 tailwindcss 的编译,否则不会启用 tailwindcss。如果你是纯粹的 SDK 包,不需要使用 tailwindcss,可以不用创建 `tailwind.config.mjs` 文件。
|
||||
在 `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 的扫描范围则统一在 `packages/@core/base/design/src/css/global.css` 中维护。
|
||||
|
||||
::: tip 包使用 Tailwind CSS 的说明
|
||||
|
||||
如果你是纯粹的 SDK 包,不需要使用 Tailwind CSS,则无需额外增加旧版 `tailwind.config.*` 文件。
|
||||
|
||||
:::
|
||||
|
||||
## 提示
|
||||
## Vue SFC 中的 `@apply`
|
||||
|
||||
现`tailwindcss`已至v4.x版本,使用方法与`tailwindcss: ^3.4.17`有差异,v4.0无法与v3.x版本兼容,在开发前请确认`package.json`中的`tailwindcss`版本。
|
||||
项目对 Vue 单文件组件中的 `@apply` 做了统一处理,相关逻辑位于:
|
||||
|
||||
- `internal/vite-config/src/plugins/tailwind-reference.ts`
|
||||
|
||||
当组件样式中使用 `@apply` 时,会自动注入对应的 `@reference`,一般不需要手动补充。
|
||||
|
||||
Reference in New Issue
Block a user