评论

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

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 个评论

  • 不靠谱的官方说法
    不靠谱的官方说法
    2022-04-09

    你好,执行完npm i -g windicss后我这为什么依然报这个报错

    

    2022-04-09
    赞同
    回复 2
  • 知味
    知味
    2022-02-25

    你好,请问如何将px转为rpx呢,有现成的例子吗?

    多谢楼主!

    2022-02-25
    赞同
    回复 1
    • 李伟豪
      李伟豪
      2022-02-25
      可以直接使用rpx
      2022-02-25
      回复

正在加载...

登录 后发表内容