评论

超简单集成：原生小程序使用原子化css框架windicss开发

2022-01-28
6114浏览
12评论

css原子化框架（tailwindcss、windicss）在原生小程序的集成。

如果你也喜欢用原子化css，并想在原生小程序里使用的话，那就按下面4个步骤试试。

1) 在小程序目录下新建windi.wxss空文件

2）在app.wxss引入windi.wxss

// app.wxss
@import 'windi.wxss'


3)全局安装windicss依赖(安装过后，后续无需再次安装)

cnpm i -g windicss

4)在小程序目录下执行生成windi内容

windicss '**.wxml' -o windi.wxss -d

然后就可以开始使用 classes 工具类啦。


效果图：


如果你是使用tailwindcss，建议试试windicss，你会爱上它，如果对你有帮助的话，点赞支持一下。

官网：Windi CSS 是下一代工具优先的 CSS 框架。

最后一次编辑于  2022-01-28  
点赞 1
收藏
评论

12 个评论

  • DeadLine
    DeadLine
    07-30

    怎么转 rpx


    07-30
    赞同
    回复
  • FiFi
    FiFi
    2023-06-21

    小程序中使用了vant组件库再次允许的话会报错 有啥解决的方法没

    2023-06-21
    赞同
    回复 1
    • FiFi
      FiFi
      2023-06-21
      执行脚本的话 会报错 跟一楼的问题一样 有大神解决了没
      2023-06-21
      赞
      回复
  • ，
    ，
    2023-03-29

    你好 请问这个是怎么回事？

    2023-03-29
    赞同
    回复 3
    • ，
      ，
      2023-03-29
      我把带反斜杠的代码删除了，重新执行命令又会生成
      2023-03-29
      赞
      回复
    • ，
      ，
      2023-03-29
      会不会是我集成了vant的原因
      2023-03-29
      赞
      回复
    • ，
      ，
      2023-03-29
      就是集成vant的原因，我指定检测的文件目录就正常了，windicss ./pages/index/**.wxml -o windi.wxss -d
      2023-03-29
      赞
      回复
  • 小龙
    小龙
    2022-11-16

    楼主你好，我没太懂你这个解决方案。你这样转化下文件，但是编译出来的代码还是不变啊，所以语法还是不兼容小程序的啊

    2022-11-16
    赞同
    回复 2
    • ，
      ，
      2023-03-29
      看我帖子
      2023-03-29
      赞
      回复
    • FiFi
      FiFi
      2023-06-28
      配置颜色不生效 是啥原因呢
      2023-06-28
      赞
      回复
  • Bently.Di
    Bently.Di
    2022-08-11

    可以自定义windicss吗，比如我想定义我自己的一套主题

    2022-08-11
    赞同
    回复 1
    • 李伟豪
      李伟豪
      2022-08-16
      可以的，在windi.config.js里设置
      2022-08-16
      赞
      回复
  • Re
    Re
    2022-07-15

    你好，如果需要加 !important ，你是怎么处理的

    2022-07-15
    赞同
    回复 2
    • 李伟豪
      李伟豪
      2022-07-18
      我没用到这个，还没找到解决方法
      2022-07-18
      赞
      回复
    • 鲤子
      鲤子
      2022-07-25
      class="!text-gray-500"
      2022-07-25
      赞
      回复
  • Carmen
    Carmen
    2022-06-08

    如何在vscode里有代码提示？ 安装了WindiCSS IntelliSense没效果

    2022-06-08
    赞同
    回复 3
    • 李伟豪
      李伟豪
      2022-06-13
      在这里改一下就可以
      2022-06-13
      赞
      回复
    • 张群
      张群
      2022-06-18回复李伟豪
      你好，我配置后，还是没有代码提示...
      2022-06-18
      赞 1
      回复
    • 李伟豪
      李伟豪
      2022-06-20回复张群
      你是用vscode，还是小程序开发工具？
      2022-06-20
      赞
      回复
  • 唐同学
    唐同学
    2022-04-25

    楼主你好，我发现一个问题，用过的类，删掉后，重新构建的windi.wxss不会清除已经不用的类。

    而且，就是我手工把windi.wxss的内容全部删除，再构建，还是不能解决。

    有没有办法，每次自动构建，都是目前用到的类，使windi.wxss尽量精简。谢谢

    

    2022-04-25
    赞同
    回复 1
    • 李伟豪
      李伟豪
      2022-04-25
      我这里测试，每次重启命令行，都会重新生成最新的，并删除不再使用的类。
      2022-04-25
      赞
      回复
  • 李伟豪
    李伟豪
    2022-04-20

    uniapp集成windicss请参考这篇(点击跳转)

    2022-04-20
    赞同
    回复
  • peng
    peng
    2022-04-19

    这样岂不是每次编写了样式就重新需要运行命令嘛

    2022-04-19
    赞同
    回复 5
    • 李伟豪
      李伟豪
      2022-04-19
      命令执行后会自动监控文件，当文件发生变化自动执行。
      2022-04-19
      赞
      回复
    • peng
      peng
      2022-04-20回复李伟豪
      我看uniapp没有自动去 监控文件变化
      2022-04-20
      赞
      回复
    • peng
      peng
      2022-04-20回复李伟豪
      而且他生成的目录也不是我想要的呢
      2022-04-20
      赞
      回复
    • 李伟豪
      李伟豪
      2022-04-20回复peng
      执行命令时可以选择生成的目录，比如生成在utils下，可以用windicss '**.wxml' -o ./utils/windi.wxss -d，另外uniapp请参考篇文章，集成在vite里。https://developers.weixin.qq.com/community/develop/article/doc/000c428f5206a0f87e6d1582e5ec13
      2022-04-20
      赞
      回复
    • peng
      peng
      2022-04-20回复peng
      谢谢谢谢 我去看看
      2022-04-20
      赞
      回复

正在加载...

请 登录 后发表内容
作者介绍

文章标签