boos
e0a5f57793
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
100 lines
3.3 KiB
Markdown
100 lines
3.3 KiB
Markdown
---
|
||
description: 解决 markstream-vue 与 Tailwind、shadcn 以及 CSS layer 顺序相关的样式覆盖问题。
|
||
---
|
||
|
||
# Tailwind 集成与样式顺序
|
||
|
||
如果你的项目使用 Tailwind 或基于 Tailwind 的组件库（如 shadcn），可能会遇到样式覆盖问题。推荐将 `markstream-vue` 的 CSS 导入置于 `@layer components { ... }` 中以控制样式优先级。
|
||
|
||
另外，`markstream-vue` 的打包 CSS 会限定在内部 `.markstream-vue` 容器下以降低全局冲突；来自 `markstream-vue/index.css` 的 Tailwind 工具类只会在该容器内生效。
|
||
|
||
示例：
|
||
|
||
```css
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
@layer components {
|
||
@import 'markstream-vue/index.css';
|
||
}
|
||
```
|
||
|
||
更多替代方案：使用 `prefix` 配置以避免类名冲突，或在应用层覆盖样式。
|
||
|
||
## 在 Tailwind 中避免重复生成 CSS
|
||
|
||
为了在使用 Tailwind 的项目中减少重复的 utility CSS，推荐优先使用本包提供的 "tailwind-ready" 输出，而不是完整的预编译 `index.css`。
|
||
|
||
- Tailwind v3（推荐流程）：
|
||
- 在应用中引入 `index.tailwind.css`，这样只会引入组件样式而不会把 Tailwind 的工具类重复打包进去。
|
||
- 在 `tailwind.config.js` 的 `content` 中加入本包生成的类列表，使 Tailwind 能识别并避免重新生成相同的类。
|
||
|
||
示例（Tailwind v3 / `tailwind.config.js`）：
|
||
|
||
```js
|
||
module.exports = {
|
||
content: [
|
||
'./src/**/*.{js,ts,vue}',
|
||
// 包安装后可以使用：require('markstream-vue/tailwind')
|
||
require('markstream-vue/tailwind'),
|
||
],
|
||
}
|
||
```
|
||
|
||
示例 CSS 导入（应用入口）：
|
||
|
||
```css
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
@import 'markstream-vue/index.tailwind.css';
|
||
```
|
||
|
||
- Tailwind v4：可以直接包含 `index.tailwind.css`，使用 v4 的扫描器发现类名，无需额外的 `tailwind.ts` 辅助文件。
|
||
|
||
- 非 Tailwind 项目：继续使用预编译好的 `index.css`：
|
||
|
||
```css
|
||
@import 'markstream-vue/index.css';
|
||
```
|
||
|
||
说明：
|
||
- 本包导出 `./tailwind` 条目（`./dist/tailwind.ts`），导出的是提取出的 class 列表。发布到 npm 后可以在 `tailwind.config.js` 中通过 `require('markstream-vue/tailwind')` 引入该列表。
|
||
- 在本地开发时也可以直接引用生成文件（例如 `./dist/tailwind.ts`）。
|
||
|
||
## UnoCSS 集成
|
||
|
||
UnoCSS 遵循相同规则：先导入 reset，再将库的 CSS 放到受控 layer 中，避免被 `utilities` 覆盖。
|
||
|
||
1. 在 `uno.config.ts` 中注入 `preflights`：
|
||
|
||
```ts
|
||
import { defineConfig, presetUno, presetWind } from 'unocss'
|
||
|
||
export default defineConfig({
|
||
presets: [presetUno(), presetWind()],
|
||
preflights: [
|
||
{
|
||
layer: 'preflights',
|
||
getCSS: () => '@import "markstream-vue/index.css";',
|
||
},
|
||
],
|
||
})
|
||
```
|
||
|
||
2. 或者手动在样式表中声明：
|
||
|
||
```css
|
||
@import '@unocss/reset/tailwind.css';
|
||
|
||
@layer components {
|
||
@import 'markstream-vue/index.css';
|
||
}
|
||
```
|
||
|
||
3. 当类名与 Uno/Tailwind 冲突时，可以在配置中设置 prefix（如 Tailwind `prefix: 'tw-'`，Uno 通过 `shortcutsPrefix` 或自定义规则），或者将 `MarkdownRender` 包裹在 `custom-id` 上下文中再进行覆盖。
|
||
|
||
调试技巧：在浏览器 DevTools 中打开 “Cascade Layers” 面板，确认 `markstream-vue` 的样式位于 utilities 之上。如果不在正确层级，请调整导入位置或 `preflights` 顺序。
|