vue 项目，开发预览和构建后的页面不一致，求助

[LeeReamond]

如题，项目中使用 vue + vuetify + tailwind 。第一次使用 tailwind，没想到遇到这种问题。

具体表现为，使用 npm run serve 运行开发服务器，显示界面如同代码预期，一切正常。而使用 npm run build 编译项目后使用后端提供服务，则部分样式出现了错误。如同下图

补充

1 、整个项目完全由前端构建，全部为静态文件，不涉及任何后端 api

2 、图中可见，页面使用了两个 vuetify 组件，分别是 header 和两个按钮，这些组件都出现了变形。而使用 tailwind 构建的样式则完全没问题。

3 、经测试 vue 的 js 代码可以正常运行，输出结果正确

4 、我测试了一下编译后的 index.html 中加载的样式和脚本文件，全部都可以正常访问，不是由于某个文件无法加载造成的错误。

5 、图中可以看到，materialdesignicons 的图标是可以正常显示的，说明图标文件加载没问题

有没有大佬能说下可能是啥原因导致的？

[bojackhorseman]

这显然是 css 的问题

[Pastsong]

css 文件加载路径错了

[bojackhorseman]

是不是用的按需加载？打包的时候没把 vuetify 的 css 打包进去

[LeeReamond]

@bojackhorseman
@Pastsong

是使用的 vue-cli 项目构建文件，我的 vue-cli 是从 3 版本开始学的，3 得时候已经不用 webpack 了，我一直就没学 webpack 。不过应该不是按需加载吧，我的.vue 文件中并没有显式地载入外部 css 文件,都是单个文件自己的 css 。另外我测试了一下不是由于 tailwind 和 vuetify 重名产生的问题，使用 prefix 对状况无改善

[LeeReamond]

@Pastsong 为什么加载路径错了，但 dev server 中却可以正常显示呢

[Jirajine]

f12 看看有没有错误。以及你的 tailwind 是怎么引入的，postcss 有没有正常配置。

[LeeReamond]

@Jirajine

F12 没有错误，整个构建流程是

1 、vue create project

2 、cd projext \ vue add vuetify

3 、然后是 npm 一系列 axios\vuex\vue-router 之类的不太相干的安装

4 、之后安装 tailwind，首先 npm install tailwindcss

4.1 、创建 src\assets\tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

4.2 、修改 src\main.js ，增加

import "@/assets/tailwind.css"

4.3 、运行 tailwind 初始化

npx tailwind init --full

4.4 、创建 postcss.config.js

内容略长不在这里贴了，跟网上搜到的代码一致

====

全装完之后 npm run serve 可以正常工作，结果写完一个 page，build 就错了，略坑

[LeeReamond]

修正，tailwind 安装命令是 npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
只装 tailwind.css 会出现缺失 postcss 的错误

[Jirajine]

@LeeReamond f12 打开看看你引入的 tailwind.css 内容是否正常，应该包含 tailwind 中所有你用到的部分，如果没有那就是 postcss 配置出了问题。
还有一种可能，postcss 会根据你代码中用到的 class name 来把未使用的自动删掉，如果你代码中有字符串拼接 class name 的情况，可能会因为未识别而错误地删掉。

可能是因为 dev 模式没进行自动删除，所以没有问题。

[mrcotter2013]

Vuetify 已经提供不少 css helper classes，用到 tailwind 的地方应该不多，而且也需要协调两者的 theme，fonts, break points 等基本配置，会比较麻烦

[LeeReamond]

@Jirajine 我稍后排查一下，不过这里是 tailwind 的样式正确，vuetify 的样式错误，是否是指排查 vuetify，因为 tailwind 似乎不需要排查

[LeeReamond]

@mrcotter2013 我也是第一次用 tailwind，不过我感觉二者差很远，vuetify 的响应式断点是通过 js 实现的，而 tailwind 则是通过纯 css，后者比前者香太多了

[Jirajine]

@LeeReamond 那你还是看一下样式是如何引入的吧。是类名 auto prefix 没匹配上，还是 css 类没有了。可能 postcss 把你 vuetify 的 css 给搞乱了。

[LeeReamond]

@Jirajine 检查了一下，应该确实是这个原因了，app.abcdefg.css 里面只有 tailwind 的类，没有 vuetify 的类，这种问题应该怎么修复啊。我的 vue-cli 版本是 4.5，webpack 之类的工具一直没用过

[LeeReamond]

github 搜索了一下范例项目，目前还没找到能跑的，不过感觉问题应该是网上的 vuecli 安装 tailwind 的教学的问题，里面的 postcss 配置文件似乎会排除 vuetify 脚本

[xiaoming1992]

直接 f12 看看他为什么是这个样式，样式哪里来的，应该可以找到原因啊

[Jirajine]

@LeeReamond #14 看了一下 https://cli.vuejs.org/guide/css.html#postcss vue cli 内部也使用了 postcss，你引入 tailwind 的时候两者共享了配置（ tailwind 推荐的引入方式就是作为 postcss 的插件），导致了冲突。
这种没什么好的办法，需要你对 vue cli /webpack / postcss 它们的构建流程、插件、loader 等都很熟悉才行，还要搞清楚 vuetify 的 css 是怎么引入的，在 postcss 中把它排除掉。
所以我建议干脆就不要通过 postcss 使用 tailwind 了，改用 tailwind cli 手动生成，参考这个 https://tailwindcss.com/docs/installation#using-tailwind-without-post-css
然后在你的编译流程中通过命令行调用的方式调用 tailwind cli 。

[LeeReamond]

@Jirajine 感谢一路跟踪回复。大略看了一下配置方式 2，似乎这种引入方式不能实现最小构建？强迫症略有些难受。我目前在 gh 找到了一个满足使用条件的最小构建，安装了 vuetify，router，vuex，postcss 和 tailwind，已经测试能够在 build 下共存（但 matirialdesign 的 icon 失效了，这个留待以后解决）。我观察了一下自己能看懂的 src 目录，并未发现什么奇异的地方，不是很理解为什么他的就能够共存而我的就不能够。大佬能帮忙看一下它核心相关代码在哪里吗，我观察 postcss.config.js 文件，里面只有很少的内容，似乎也并不影响什么？

https://github.com/gcavanunez/starter-vue-vuetify-tailwind-frontend

[Jirajine]

@LeeReamond #18 可以最小的，tailwind-cli build 就是扫描你的代码库把没用到的类都 purge 掉的过程。只不过和原本由 postcss 处理，现在需要分开单独运行。

那个项目可能是 tailwind.config.js 里 指定了 prefix 有关，你可以试一试。我不太清楚 vuetify 的样式是怎么引入的及具体构建流程。

webpack 本来就够复杂的了，vue cli 又包了一层。我倒是建议尝试 snowpack/vite/parcel 这种简单的构建工具。vue-cli/cra 这种开箱即用一时爽，出了问题想搞明白很费劲。

[echowuhao]

purge 把所以可能有 tailwind class 的文件都加进去。

https://github.com/gcavanunez/starter-vue-vuetify-tailwind-frontend/blob/master/tailwind.config.js#L3

如果你在 index.html 也用了 tailwind，就把 tailwind 也写入 purge