less 与 tailwind css 无法共存，因 less 编译早于 postcss，@apply 等规则在 less 阶段即报错或被忽略；唯一可行路径是改用 postcss + @tailwindcss/nesting。
Less 与 Tailwind CSS 无法共存——不是配置能调出来的兼容问题，而是构建阶段天然互斥。只要你在 .less 文件里写 @apply 或 @screen，就注定失败。
为什么 @apply 在 .less 里一定报错
Less 编译器在 PostCSS 之前运行，而 @apply 是 Tailwind 的 PostCSS 插件才识别的自定义规则。Less 遇到它会直接抛 Unknown rule @apply，或者静默跳过整条声明。哪怕你把它写成注释 // @apply bg-blue-500，也不会被解析成 CSS —— 注释就是注释。
常见错误现象：
-
@import (css) "tailwind.css"导入含@apply的文件 → Less 当普通 CSS 透出，但此时@apply还没被 Tailwind 处理，浏览器直接丢弃整条规则 - 试图用
@use或@forward把 Tailwind 工具类“引入”到 Less → Sass/Less 根本不理解 Tailwind 的主题结构，theme('colors.blue.500')会报 undefined
为什么 @import 顺序在 Less 里不可控
Less 的 @import 在编译期全部提升到文件顶部，按导入链展开，而不是按你在源码里写的物理位置输出 CSS。这导致：
- 你以为先
@import "reset.less"再@import "button.less"，实际生成的 CSS 中 button 样式可能出现在 reset 前面 - 嵌套
@import（比如button.less里再@import "mixins.less"）会让依赖树爆炸，最终顺序取决于导入深度而非你写的顺序 -
@import (reference)虽不输出 CSS，但变量和 mixin 仍按导入时机注入——如果variables.less导入晚于使用它的组件文件，就会报variable @primary-color is undefined
唯一可行路径：全换用 PostCSS + @tailwindcss/nesting
放弃 Less 主导样式逻辑，改用纯 .css 文件 + PostCSS 生态，是目前唯一稳定、可维护的方案。它支持嵌套、变量、@apply、@screen，且构建更快。
实操步骤：
- 安装插件：
npm install -D postcss-import @tailwindcss/nesting - 确保
postcss.config.js中插件顺序为：postcss-import→@tailwindcss/nesting→tailwindcss - 所有样式文件改用
.css后缀，例如base.css、components/button.css - 主文件顶部用
@import "components/button.css";—— 注意只能导入纯 CSS 文件，不能是.less - 嵌套写法和 Sass 类似：
.btn { @apply py-2 px-4; &:hover { @apply bg-blue-600; } }，但底层不经过 Sass 编译器
别踩这些坑
强行保留 Less 只会浪费时间。最容易被忽略的是：即使你把 Tailwind 的 CSS 文件单独编译好，再用 Less 的 @import (css) 引入，@apply 规则也早已被浏览器忽略——因为它们根本不是合法 CSS 规则，只是 PostCSS 的中间语法糖。真正起作用的永远是 PostCSS 流程中那几毫秒的解析窗口，而 Less 完全不在那个窗口里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
