public/ruoyi-plus-vben5-h
1
0
Fork 0
mirror of https://github.com/imdap/ruoyi-plus-vben5.git synced 2026-05-06 10:01:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(@vben/docs): align guide docs with current tooling

Browse Source
This commit is contained in:
xingyu4j
2026-03-14 21:33:55 +08:00
parent 278032c94b
commit 6c274b75b8
11 changed files with 403 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
docs/src/en/guide/project/tailwindcss.md
View File

@@ -1,13 +1,38 @@
# Tailwind CSS
[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework for quickly building custom designs.
[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework for quickly building custom designs. The current project uses **Tailwind CSS v4**.
## Configuration
The project's configuration file is located in `internal/tailwind-config`, where you can modify the Tailwind CSS configuration.
The project no longer maintains Tailwind through `tailwind.config.*` files. Theme definitions and scan scope are now managed through CSS and the shared Vite configuration.
::: tip Restrictions on using tailwindcss in packages
- Theme entry: `packages/@core/base/design/src/css/global.css`
- Vite integration: `internal/vite-config`
Tailwind CSS compilation will only be enabled if there is a `tailwind.config.mjs` file present in the corresponding package. Otherwise, Tailwind CSS will not be enabled. If you have a pure SDK package that does not require Tailwind CSS, you do not need to create a `tailwind.config.mjs` file.
In `global.css`, you will see the Tailwind CSS v4 directives currently used by the project, such as:
- `@source`
- `@custom-variant`
- `@theme`
- `@theme inline`
- `@utility`
## How Packages Use Tailwind CSS
The project does not decide whether Tailwind CSS is enabled based on whether a package contains `tailwind.config.mjs`.
Apps and packages share `@vben/vite-config`, which integrates `@tailwindcss/vite`. The Tailwind scan scope is managed centrally in `packages/@core/base/design/src/css/global.css`.
::: tip Notes on using Tailwind CSS in packages
If you are building a pure SDK package and do not need Tailwind CSS, you do not need to add any legacy `tailwind.config.*` file.
:::
## `@apply` in Vue SFCs
The project applies a shared handling layer for `@apply` inside Vue single-file components. The related logic is located at:
- `internal/vite-config/src/plugins/tailwind-reference.ts`
When component styles use `@apply`, the required `@reference` is injected automatically in most cases.