崮生
崮生
  • 发布:2021-01-20 16:20
  • 更新:2024-01-13 13:45
  • 阅读:10108

在 uniapp 中使用 tailwindcss

分类:uni-app

崮生的 uni-app 最佳实践

代码仓库

tailwindcss

! 值得注意的是微信小程序并不支持一些 CSS 选择器还有他的 wxss 不支持 \ 所以如果直接使用 tailwindcss 会报错类似于图中这样的错 :image.png

  • 幸运的是 tailwindcss 支持自定义 separator
  • 但是在类名中包含 . 的又需要 \. 这样的形式去声明类名而且貌似没有办法自定义这个, 所以在这种情况下我复制了 'tailwindcss/defaultConfig' 中的配置将 \ 全部改成了 _
  • image.png这种语法 wxss 也不支持.... 这里不是 CSS 类名修改可以避免的,就只能去corePlugins禁用相关的插件
    • 禁用了 space divideWidth divideStyle divideOpacity
  • CSS 的类名是允许以数字开头的,但需要进行转义,而 screens 配置中有一个 2xl 这个 key 会在类名的最前面出现,于是 tailwind 转义为 \32xl 这里就又有了 \ 所以这里也需要 改一下
  • 本 demo 对 tailwind 进行了如上定制,所以在使用的时候需要注意这些点

效果

image.png

image.png

image.png

相关 commit 记录


by 崮生 from 崮生 • 一些随笔,欢迎 赞助本文
本文欢迎分享与聚合,全文转载未经授权( 联系我)不许可。

神仙散棒槌

3 关注 分享
l***@163.com 1***@qq.com DCloud_UNI_HRK

要回复文章请先登录注册

崮生

崮生 (作者)

回复 1***@qq.com :
这都好久以前的了,至于图片为啥没了,得问 dcloud ,我当初写的时候还是有的
2024-01-13 13:45
1***@qq.com

1***@qq.com

回复 崮生 :
图片都预览不了了
2024-01-03 12:34
6***@qq.com

6***@qq.com

云打包后下载变成了腾讯手游助手apk怎么解决啊?大佬能告我一下吗?
2021-11-24 00:11
4***@qq.com

4***@qq.com

我也在uniapp使用tailwindcss中遇到一些问题,现在主要是打包后main.css 3.09MB大小,让空项目的主包就有4M大小。。。不知道是有windicss的尝试方案,我试了`postcss-windicss-postcss7`但是并没有成功
2021-11-23 23:38
Deajax

Deajax

您好,我输出到小程序里的common/main.css,就是编译后的tailwind,有3.09MB之多,请问如何解决?
2021-11-09 15:36
崮生

崮生 (作者)

回复 x***@yeah.net :
tailwind 没有什么坑,我主要用来写小程序 一般都是微信造成的坑
2021-03-04 20:01
x***@yeah.net

x***@yeah.net

回复 崮生 :
後續有遇到什麽坑嗎
2021-01-26 17:45
崮生

崮生 (作者)

dcloud 这个文章发布系统真的绝了,这发不出来和预览的完全不一样....
2021-01-20 16:24