为什么webpack环境下通过sass引入TailwindCSS无法正确导入全部组件

问题原因 #

1. webpack模块解析配置错误，无法加载Tailwind内置默认配置

你webpack.config.js的resolve.modules配置中第一个值为'/node_modules'，这是系统根目录下的绝对路径，而非项目本地的node_modules目录。webpack在加载Tailwind依赖时，无法从项目本地node_modules中读取Tailwind自带的默认主题、工具类预设，仅能读取你本地tailwind.config.js中手动编写的配置内容。当你使用npx tailwindcss init --full后，所有Tailwind默认配置都被写入了本地配置文件，因此无需读取内置预设也能正常生成所有样式。
而直接用postcss构建时，不会走webpack的模块解析规则，会直接从项目本地node_modules加载Tailwind及内置默认配置，因此不需要全量本地配置也能正常运行。

2. JIT模式的样式裁剪规则在不同构建上下文下的差异

你开启了Tailwind的JIT模式，该模式默认会基于purge字段配置的路径扫描项目中用到的Tailwind类，未被扫描到的类不会被打包进产物。
直接使用postcss构建时，如果是开发环境运行，Tailwind默认会关闭裁剪逻辑，输出全量样式；而webpack构建时因为你开启了minimize压缩，默认触发生产环境规则，purge字段为空的情况下，Tailwind只会保留明确被引用到的样式，导致产物体积异常偏小。

修复方案 #

• 修正webpack配置的resolve.modules字段，将'/node_modules'改为'node_modules'，让webpack优先读取项目本地的依赖
• 在tailwind.config.js的purge字段补充项目所有模板、脚本文件的路径，示例：

purge: ['./app/**/*.{html,js,scss}']

修复后无需生成全量默认配置文件也能正常运行。

内容的提问来源于stack exchange，提问作者tij lip0018