Tailwind 本身不提供语法高亮，需搭配 shiki 或 highlight.js 等第三方库；shiki 更适合 SSR 和主题定制，highlight.js 更轻量；Tailwind 仅负责 pre 容器样式（如 rounded-lg、bg-gray-900），不可干预 token 内部颜色。
用 pre + code 套路是基础，但 Tailwind 默认不给语法高亮
直接写 <pre class="brush:php;toolbar:false;"><code>console.log('hi')</code></pre> 只能拿到等宽字体和换行保留，没有颜色、关键字加粗或背景——Tailwind 本身不解析代码内容，也不内置 Prism/Highlight.js 的 token 规则。你看到的“高亮”效果，全靠外部语法高亮库生成的 class 名（如 token keyword）配合 CSS 样式。
必须搭配第三方高亮库，推荐 shiki 或 highlight.js
二者选型看场景：
– shiki 基于 TextMate 语法，支持 VS Code 主题、P3 色域、SSR 友好，适合静态站点或 Nuxt/Vite 项目；
– highlight.js 更轻量，CDN 直引快，但主题少、不支持原生暗色切换。
以 shiki 为例，安装后在组件中调用：
const html = await highlighter.codeToHtml(code, {
lang: 'typescript',
theme: 'github-dark'
})
生成的 HTML 已含 class="line"、class="token keyword" 等结构，此时 Tailwind 的作用是补足容器样式，而非染色。
容器层用 Tailwind 控制尺寸、圆角、阴影和滚动，别碰 token 样式
常见错误是试图用 text-red-500 覆盖 token keyword，这会失败——高亮库注入的内联 style 或更高优先级 CSS 会覆盖它。正确做法是只管外层：
-
rounded-lg给<pre class="brush:php;toolbar:false;"></pre>加圆角，别加在<code>上 -
overflow-x-auto让长代码横向滚动，加在<pre class="brush:php;toolbar:false;"></pre>，不是<code> -
bg-gray-900设背景色，确保与高亮主题对比度足够（比如github-dark需深底） -
py-4 px-6控制内边距，避免代码贴边 - 若需行号，用
before:content-[counter(line)]配合counter-reset，别依赖 JS 插件
真机/SSR 下容易漏掉的三个渲染细节
本地开发看着好，上线就错位或无高亮：
- SSR 时
shiki必须在服务端同步执行，不能用useEffect或onMounted异步高亮，否则首屏空白或 FOUC - Next.js / Nuxt 中，
highlighter实例要单例缓存，重复初始化会导致内存暴涨 - iOS Safari 对
pre内white-space: pre的换行处理有 bug，加break-words无效，得显式设word-break: break-all（用@layer utilities注入）
高亮逻辑和排版逻辑必须分层：库管染色，Tailwind 管容器。混在一起改，八成要重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
