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.
123 lines
4.2 KiB
Markdown
123 lines
4.2 KiB
Markdown
---
|
|
description: Fix Tailwind, shadcn, and CSS ordering issues when importing markstream-vue styles into a controlled layer.
|
|
---
|
|
|
|
# Tailwind Integration & Style Ordering
|
|
|
|
If your project uses a Tailwind component library like `shadcn`, you may run into style ordering or overriding issues when including `markstream-vue` CSS. The recommended approach is to import the library CSS inside a controlled Tailwind layer.
|
|
|
|
`markstream-vue` scopes its packaged CSS under an internal `.markstream-vue` container to reduce global conflicts. Tailwind utilities from `markstream-vue/index.css` apply only inside the renderer container.
|
|
|
|
Example `styles/index.css`:
|
|
|
|
```css
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
@import 'markstream-vue/index.css';
|
|
}
|
|
```
|
|
|
|
Alternatives:
|
|
- Place the library CSS inside `@layer base` if you want it to be more foundational and harder to override.
|
|
- Import the library CSS after your component or application CSS if you prefer the library styles to win.
|
|
|
|
Always re-run your dev server after changing the import order.
|
|
|
|
## Avoid duplicate CSS with Tailwind
|
|
|
|
To reduce duplicated utility CSS when using Tailwind, prefer the "tailwind-ready" output shipped by this package instead of the full, precompiled `index.css`.
|
|
|
|
- Tailwind v3 (recommended workflow):
|
|
- Import `index.tailwind.css` in your app so consumers get only the framework+component styles without embedded Tailwind utilities.
|
|
- Add the generated class list to your `tailwind.config.js` `content` so Tailwind can pick up the classes used by the renderer and not re-generate them.
|
|
|
|
Example (Tailwind v3 / `tailwind.config.js`):
|
|
|
|
```js
|
|
module.exports = {
|
|
content: [
|
|
'./src/**/*.{js,ts,vue}',
|
|
// include the helper produced by the package
|
|
// installed packages can reference: require('markstream-vue/tailwind')
|
|
require('markstream-vue/tailwind'),
|
|
],
|
|
}
|
|
```
|
|
|
|
Example CSS import (app entry):
|
|
|
|
```css
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@import 'markstream-vue/index.tailwind.css';
|
|
```
|
|
|
|
- Tailwind v4: you can directly include `index.tailwind.css` and rely on the v4 scanner to discover classes without needing the extra `tailwind.ts` helper.
|
|
|
|
- Non-Tailwind projects: continue to import the precompiled `index.css`:
|
|
|
|
```css
|
|
@import 'markstream-vue/index.css';
|
|
```
|
|
|
|
Notes:
|
|
- The package exposes a `./tailwind` entry (`./dist/tailwind.ts`) which exports the extracted class list. When installing from npm, `require('markstream-vue/tailwind')` will load that helper for use in your Tailwind config.
|
|
- If you develop locally against the repo, you may reference the generated file directly (e.g. `./dist/tailwind.ts`).
|
|
|
|
Quick try — verify Tailwind classes are discovered by adding `index.tailwind.css` and a small component:
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
import MarkdownRender from 'markstream-vue'
|
|
|
|
const md = '# Tailwind test\n\nThis text is styled by tailwind'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="prose">
|
|
<MarkdownRender :content="md" />
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
## UnoCSS integration
|
|
|
|
UnoCSS follows the same rules: import resets first, then wrap renderer CSS so component styles stay in the correct layer.
|
|
|
|
1. Install Uno presets (`presetUno`, `presetWind`) and include the package CSS inside a `preflight`:
|
|
|
|
```ts
|
|
// uno.config.ts
|
|
import { defineConfig, presetUno, presetWind } from 'unocss'
|
|
|
|
export default defineConfig({
|
|
presets: [presetUno(), presetWind()],
|
|
preflights: [
|
|
{
|
|
// ensures the CSS runs with the base reset
|
|
layer: 'preflights',
|
|
getCSS: () => '@import "markstream-vue/index.css";',
|
|
},
|
|
],
|
|
})
|
|
```
|
|
|
|
2. If you prefer to rely on CSS layers manually, include the CSS in your main stylesheet:
|
|
|
|
```css
|
|
@import '@unocss/reset/tailwind.css';
|
|
|
|
@layer components {
|
|
@import 'markstream-vue/index.css';
|
|
}
|
|
```
|
|
|
|
3. Use Uno prefixes (e.g., `uno` config `rules: [], shortcuts: [], theme: {}` + `shortcutsPrefix: 'u-'`) when class names collide with renderer classes. Tailwind users can also set `prefix: 'tw-'` in `tailwind.config.js`.
|
|
|
|
Troubleshooting tip: enable the “Cascade Layers” view in devtools to check whether Uno/Tailwind utilities override renderer selectors. If utilities appear below the component layer, move the import into `@layer components` or adjust the preflight order.
|