能共存，但默认配置下必然失效——postcss-modules必须排在tailwindcss之前，否则css modules加哈希前缀后tailwindcss无法匹配类名；@apply需postcss-nested和postcss-custom-properties支持且顺序严格；覆盖第三方样式必须用:global()。
能共存，但默认配置下必然失效——不是写法问题，是 PostCSS 插件执行顺序没对上。
postcss-modules 必须排在 tailwindcss 前面
这是唯一决定性条件。CSS Modules 的作用是给 .button 这类选择器加哈希前缀（如 .Button_button__abc123），而 tailwindcss 插件必须在这个动作之后运行，才能生成匹配该带前缀选择器的工具类规则。
如果顺序反了：tailwindcss 先看到原始类名 btn，生成的 CSS 规则是 .btn { ... }；等 postcss-modules 再加前缀，实际 DOM 类名已是 .Button_btn__xyz，浏览器根本找不到对应样式。
- 错误写法（对象形式，Node.js ≥15 后顺序不可靠）：
{ 'tailwindcss': {}, 'postcss-modules': {} } - 正确写法（数组形式，显式控制）：
[ 'postcss-modules', 'tailwindcss', 'autoprefixer', 'cssnano' ] - 若用
@tailwindcss/postcss（Next.js 14+ 推荐），它内部已封装tailwindcss，仍需确保它在postcss-modules之后
@apply 在 .module.css 里不生效？检查两个插件是否缺失
@apply 不是语法糖，它依赖 postcss-nested 解析嵌套、postcss-custom-properties 解析 @layer 和主题变量。这两个插件缺一不可，且位置也有要求：
-
postcss-custom-properties必须在tailwindcss之前（否则@theme或自定义颜色无法被识别） -
postcss-nested必须在tailwindcss之后（否则@apply里的嵌套结构解析失败） - 常见现象：写
@apply bg-blue-500 hover:bg-blue-600，结果原样输出成字符串，或hover:变体完全不触发
:global() 是穿透第三方组件样式的唯一方式
TW-Elements、Swiper、Flatpickr 这类库的类名（如 .tw-button、.swiper-slide）是全局声明的，而 .module.css 会把你的选择器自动作用域化。想复用它们的样式又不污染全局？只能靠 :global()。
错误写法：.my-button { @apply px-4 py-2; } —— 实际编译为 .MyComponent_my-button__xyz .my-button { ... }，根本找不到 .tw-button。
正确写法：:global(.tw-button) { @apply px-4 py-2 rounded; }，确保样式直接打到原始类上。
- 所有需要覆盖第三方全局类的场景，都得走
:global()，没有例外 -
:global()不能嵌套，不能和本地类混写（如:global(.tw-button).active无效） - Vue 的
:deep()或 React 的::part()不适用于这类第三方 CSS 库
真正麻烦的不是第一次配通，而是每次升级 tailwindcss 或引入新 PostCSS 插件时，整个链路都要重新验证——顺序松动一点，所有 .module.css 里的 Tailwind 类就集体静默。别信文档，用 console.log 打印插件执行顺序最可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
