# Tailwind CSS \[Use Tailwind utilities in Vocs pages and components] Vocs includes Tailwind's Vite plugin in its default Vite stack. Add Tailwind to your project, import it from `src/pages/_root.css`, then use utilities in MDX and React components. You do not need to install `@tailwindcss/vite` or edit `vite.config.ts` just to enable Tailwind. ## Quick Prompt Ask your AI agent to wire Tailwind into your Vocs project: ```txt Read https://vocs.dev/guide/tailwind and add Tailwind CSS to my Vocs project. ``` ## Install Tailwind Add `tailwindcss` to your project. :::code-group ```bash [npm] npm install -D tailwindcss ``` ```bash [pnpm] pnpm add -D tailwindcss ``` ```bash [yarn] yarn add -D tailwindcss ``` ```bash [bun] bun add -D tailwindcss ``` ::: ## Import Tailwind Create `src/pages/_root.css`, then import Tailwind from there. Vocs loads this file automatically on every page. :::file-tree * +src * +pages * \_root.css Global styles. ::: ```css [src/pages/_root.css] @import 'tailwindcss'; ``` Tailwind automatically scans your Vocs pages and components, so most projects do not need a Tailwind config file. ## Use Utilities Use Tailwind classes in JSX inside `.mdx` pages and React components. ```mdx [src/pages/index.mdx] # Docs

Deploy Contracts

Ship Solidity apps with Vite-native docs.

``` Use `className` inside JSX. Plain Markdown syntax does not accept Tailwind classes directly, so switch to JSX when a block needs custom utility styling. ## Support Dark Mode Vocs stores the active theme on the document's `color-scheme`. If you use Tailwind's `dark:` variant and want it to follow the Vocs theme toggle, add a custom dark variant in `_root.css`. ```css [src/pages/_root.css] @import 'tailwindcss'; @custom-variant dark (&:where(:root[style*='color-scheme:dark'] *, :root[style*='color-scheme: dark'] *)); ``` This lets classes like `dark:border-zinc-800` respond to the same theme state as the built-in Vocs UI. ## Reuse Vocs Tokens Map Vocs CSS variables into Tailwind theme tokens when custom components should follow the docs theme. ```css [src/pages/_root.css] @import 'tailwindcss'; @theme { --color-vocs-accent: var(--vocs-color-accent); --font-sans: var(--vocs-font-family); --font-mono: var(--vocs-font-family-mono); } ``` ```mdx [src/pages/index.mdx] Start building ``` ## Skip Preflight `@import 'tailwindcss'` enables Tailwind's full default CSS, including Preflight. If you only want Tailwind theme tokens and utilities, import those layers instead. ```css [src/pages/_root.css] @import 'tailwindcss/theme.css' layer(theme); @import 'tailwindcss/utilities.css' layer(utilities); ``` Start with the full import unless you have a specific reason to avoid Tailwind's base styles. See also: [Theming](/guide/theming)