website-tailwind-docusaurus
Tailwind v4 + Infima coexistence in Docusaurus. Use when styling, adding utilities, or debugging CSS conflicts.
来源信息
- 仓库
- VirtusLab/scala-cli
- 最近来源活动
- 2026年10月1日 13:06
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 644
- Forks
- 170
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- website-tailwind-docusaurus
- description
- Tailwind v4 + Infima coexistence in Docusaurus. Use when styling, adding utilities, or debugging CSS conflicts.
# Tailwind + Docusaurus
## Setup
- Plugin: `src/plugins/tailwind-config.ts` → `configurePostCss` + `@tailwindcss/postcss`
- Entry: `src/css/tokens.css` imported via `customCss` in `docusaurus.config.ts`
- Dark: `@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *))`
## Do
- Prefer utilities + `cn()` from `src/lib/utils.ts`
- Use Infima grid (`row` / `col`) only where existing page structure still relies on it; new layouts prefer Tailwind grid/flex
- Scope product chrome with clear class prefixes (`sc-` optional) if Infima clashes
## Do not
- Use bare Tailwind class `container` (collides with Infima) — use `mx-auto w-full max-w-[1204px] px-4` (or similar)
- Enable aggressive Tailwind preflight that resets Infima docs styles — keep theme + utilities; verify docs after CSS changes
- Add `tailwind.config.js` for simple tokens — CSS `@theme` is source of truth
在 GitHub 查看