website-tailwind-docusaurus
Tailwind v4 + Infima coexistence in Docusaurus. Use when styling, adding utilities, or debugging CSS conflicts.
Datos de origen
- Repositorio
- VirtusLab/scala-cli
- Última actividad en el origen
- 1 de octubre de 2026 a las 13:06
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 645
- Forks
- 169
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- 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
Ver en GitHub