这是一个创建于 1299 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，项目中使用 vue + vuetify + tailwind 。第一次使用 tailwind，没想到遇到这种问题。
具体表现为，使用 npm run serve 运行开发服务器，显示界面如同代码预期，一切正常。而使用 npm run build 编译项目后使用后端提供服务，则部分样式出现了错误。如同下图
补充
1 、整个项目完全由前端构建，全部为静态文件，不涉及任何后端 api
2 、图中可见，页面使用了两个 vuetify 组件，分别是 header 和两个按钮，这些组件都出现了变形。而使用 tailwind 构建的样式则完全没问题。
3 、经测试 vue 的 js 代码可以正常运行，输出结果正确
4 、我测试了一下编译后的 index.html 中加载的样式和脚本文件，全部都可以正常访问，不是由于某个文件无法加载造成的错误。
5 、图中可以看到，materialdesignicons 的图标是可以正常显示的，说明图标文件加载没问题
有没有大佬能说下可能是啥原因导致的？
 |
1
bojackhorseman 2021-04-16 20:43:05 +08:00 via iPhone
这显然是 css 的问题
|
 |
2
Pastsong 2021-04-16 20:44:07 +08:00
css 文件加载路径错了
|
|
3
bojackhorseman 2021-04-16 20:44:36 +08:00 via iPhone
是不是用的按需加载？打包的时候没把 vuetify 的 css 打包进去
|
 |
4
LeeReamond OP @bojackhorseman
@Pastsong 是使用的 vue-cli 项目构建文件，我的 vue-cli 是从 3 版本开始学的，3 得时候已经不用 webpack 了，我一直就没学 webpack 。不过应该不是按需加载吧，我的.vue 文件中并没有显式地载入外部 css 文件,都是单个文件自己的 css 。另外我测试了一下不是由于 tailwind 和 vuetify 重名产生的问题，使用 prefix 对状况无改善 |
|
5
LeeReamond OP @Pastsong 为什么加载路径错了，但 dev server 中却可以正常显示呢
|
 |
6
Jirajine 2021-04-16 20:59:45 +08:00 via Android
f12 看看有没有错误。以及你的 tailwind 是怎么引入的，postcss 有没有正常配置。
|
|
7
LeeReamond OP @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 就错了，略坑 |
|
8
LeeReamond OP 修正，tailwind 安装命令是 npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
只装 tailwind.css 会出现缺失 postcss 的错误 |
|
9
Jirajine 2021-04-16 22:02:53 +08:00 via Android
@LeeReamond f12 打开看看你引入的 tailwind.css 内容是否正常，应该包含 tailwind 中所有你用到的部分，如果没有那就是 postcss 配置出了问题。
还有一种可能，postcss 会根据你代码中用到的 class name 来把未使用的自动删掉，如果你代码中有字符串拼接 class name 的情况，可能会因为未识别而错误地删掉。 可能是因为 dev 模式没进行自动删除，所以没有问题。 |
 |
10
mrcotter2013 2021-04-16 22:05:25 +08:00 via iPhone
Vuetify 已经提供不少 css helper classes，用到 tailwind 的地方应该不多，而且也需要协调两者的 theme，fonts, break points 等基本配置，会比较麻烦
|
|
11
LeeReamond OP @Jirajine 我稍后排查一下，不过这里是 tailwind 的样式正确，vuetify 的样式错误，是否是指排查 vuetify，因为 tailwind 似乎不需要排查
|
|
12
LeeReamond OP @mrcotter2013 我也是第一次用 tailwind，不过我感觉二者差很远，vuetify 的响应式断点是通过 js 实现的，而 tailwind 则是通过纯 css，后者比前者香太多了
|
|
13
Jirajine 2021-04-16 22:30:24 +08:00 via Android
@LeeReamond 那你还是看一下样式是如何引入的吧。是类名 auto prefix 没匹配上，还是 css 类没有了。可能 postcss 把你 vuetify 的 css 给搞乱了。
|
|
14
LeeReamond OP @Jirajine 检查了一下，应该确实是这个原因了，app.abcdefg.css 里面只有 tailwind 的类，没有 vuetify 的类，这种问题应该怎么修复啊。我的 vue-cli 版本是 4.5，webpack 之类的工具一直没用过
|
|
15
LeeReamond OP github 搜索了一下范例项目，目前还没找到能跑的，不过感觉问题应该是网上的 vuecli 安装 tailwind 的教学的问题，里面的 postcss 配置文件似乎会排除 vuetify 脚本
|
 |
16
xiaoming1992 2021-04-16 23:12:46 +08:00
直接 f12 看看他为什么是这个样式，样式哪里来的，应该可以找到原因啊
|
|
17
Jirajine 2021-04-16 23:26:49 +08:00
@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 。 |
|
18
LeeReamond OP @Jirajine 感谢一路跟踪回复。大略看了一下配置方式 2，似乎这种引入方式不能实现最小构建？强迫症略有些难受。我目前在 gh 找到了一个满足使用条件的最小构建，安装了 vuetify，router，vuex，postcss 和 tailwind，已经测试能够在 build 下共存（但 matirialdesign 的 icon 失效了，这个留待以后解决）。我观察了一下自己能看懂的 src 目录，并未发现什么奇异的地方，不是很理解为什么他的就能够共存而我的就不能够。大佬能帮忙看一下它核心相关代码在哪里吗，我观察 postcss.config.js 文件，里面只有很少的内容，似乎也并不影响什么？
https://github.com/gcavanunez/starter-vue-vuetify-tailwind-frontend |
|
19
Jirajine 2021-04-17 00:30:35 +08:00
@LeeReamond #18 可以最小的，tailwind-cli build 就是扫描你的代码库把没用到的类都 purge 掉的过程。只不过和原本由 postcss 处理，现在需要分开单独运行。
那个项目可能是 tailwind.config.js 里 指定了 prefix 有关，你可以试一试。我不太清楚 vuetify 的样式是怎么引入的及具体构建流程。 webpack 本来就够复杂的了，vue cli 又包了一层。我倒是建议尝试 snowpack/vite/parcel 这种简单的构建工具。vue-cli/cra 这种开箱即用一时爽，出了问题想搞明白很费劲。 |
 |
20
echowuhao 2021-04-17 01:42:46 +08:00
purge 把所以可能有 tailwind class 的文件都加进去。
https://github.com/gcavanunez/starter-vue-vuetify-tailwind-frontend/blob/master/tailwind.config.js#L3 如果你在 index.html 也用了 tailwind，就把 tailwind 也写入 purge |
 |
21
christin 2021-04-17 11:38:55 +08:00 via iPhone
@LeeReamond 正好我也在学习 tailwind 18 楼是你的项目吗 我装起来看一下
|
 |
22
GzhiYi 2021-04-17 18:28:00 +08:00
我认为是 tailwindcss 在 build 的过程之中把顶栏的样式 purge 掉了。
在 postcss 配置中的 whitelistPatternsChildren 增加白名单试试？ |
 |
23
changdy 2021-04-17 20:10:58 +08:00
2333 前端现在黑箱比后端还严重....
有时候出问题了都不知道哪个步骤引入的 |
|
26
echowuhao 2021-04-18 23:44:51 +08:00
前端一直黑箱严重。
|
 |
27
doco 2021-04-19 10:02:18 +08:00
我倾向于只使用一个样式库, 同时使用多个就容易出现这种问题
|
 |
28
shzx1994529 2021-04-19 11:59:16 +08:00
@GzhiYi 是的，估计是被 purge 掉了，我就被坑过
|
|
29
LeeReamond OP @shzx1994529 后面修改了 purge 后问题已经解决
@doco 不太现实，vue 前端组件框架我用过三个，描述能力和可定制性都不怎么样，尤其当设计本身稀烂的时候，你去 codepen 搜登录界面就能看到所有用 vuetify 做出来一个赛一个的土，就没有一个能拿得出手的。。所以你往往需要自己封装组件，然而往往又不能自己封装所有组件，所以两者都要 |
 |
30
ciddechan 2021-04-19 17:05:06 +08:00
reset.css
|
Select Language