评论

taiwindcss在小程序中的应用

taiwindcss在小程序中的应用

css 工程化思想有很多(sass,less,css-in-js…),基于原子类书写思想的 taiwindcss(以下用 tw 代替)风头很盛,去年底 tw3 上线,搭配新的引擎让just-in-time模式平稳落地。

tw 的思想和好处这里不在赘述,官网介绍的很清楚(tw2 中文官网)。

这里主要描述下如何在小程序中使用tw书写样式。

题外话:很难想象前端最佳实践到来的那一天,但 css 最佳实现或许已初见苗头…

tw书写小程序

tw3 是即时(实时)生成类样式。tw 会根据您的配置文件,匹配您指定文件中包含的关键字,自动生成对应配置的样式。

在小程序中,只需要在 app.wxss 中引入 tw 生成的样式文件(记得组件中配置 addGlobalClass:true),就不必在书写组件时,关心 wxss 文件了。

  1. base类

    base类好比预设一些样式 (由于官方默认配置基于web端,小程序中只能自己定义了)

    
    /* wxss */
    
      page {
    
        height: 100%;
    
        line-height: 1.2;
    
        -webkit-text-size-adjust: 100%;
    
        font-family: "fontFamily.sans", ui-sans-serif, system-ui"
    
      }
    
      [class],
    
      view,
    
      image,
    
      ::before,
    
      ::after{
    
        box-sizing: border-box;
    
        border-width: 0;
    
        border-style: solid;
    
        border-color: currentColor;
    
      }
    
      /* variables */
    
      page{
    
        --color-primary:#22c55e;
    
        --color-primary-dark: #16a34a;
    
        /* ... */
    
      }
    
    
    
      @media (prefers-color-scheme: dark) {
    
        page {
    
          --color-primary:#ef4444;
    
          --color-primary-dark: #dc2626;
    
          /* ... */
    
        }
    
      }
    
    
    
    
  2. utilities(工具类)

    tw 中最核心的思想(工具类 css,也有叫原子化 css),大多数内部模块可以基于官方默认配置,有些还需要自定义配置。

    Demo1

    
    <view>
    
      <text class="text-red text-40 ml-10 px-20 ">
    
        我的字体颜色是红色,大小为40rpx,左外边距10rpx,内边距x轴20rpx</text
    
      >
    
    </view>
    
    <!-- wxss新增
    
    
    
          .text-red{
    
            color:red
    
          },
    
          .text-40{
    
            font-size: 40rpx
    
          },
    
          .ml-10{
    
            margin-left:10rpx
    
          }
    
          .px-20{
    
            padding: 0 20rpx
    
          } 
    
    
    
      -->
    
    
  3. components(组件类)

    有时几个工具类样式会经常出现,我们可以把他们自定义为组件类(比如下面 Demo3 中的ellipsis类)

    Demo2

    
    <view>
    
      <button
    
        class="bg-primary hover_bg-primary-dark inline-block w-100 h-60
    
        whitespace-nowrap overflow-hidden overflow-ellipsis"
    
      >
    
        工具类写法--按钮1
    
      </button>
    
    </view>
    
    
    
    <view>
    
      <button class="btn ellipsis">组件类写法--按钮2</button>
    
    </view>
    
    <!-- wxss新增
    
           .bg-primary{
    
             color:var(--color-primary)
    
           }
    
           .hover_bg-primary-dark:hover{
    
             color:var(--color-primary-dark)
    
           }
    
           .inline-block {
    
             display: inline-block;
    
           }
    
           .w-100 {
    
             width: 100rpx;
    
           }
    
           .h-60 {
    
             height: 60rpx;
    
           }
    
           .whitespace-nowrap{
    
               white-space: nowrap;
    
           }
    
           .overflow-hidden{
    
             overflow: hidden;
    
           }
    
           .overflow-ellipsis{
    
             text-overflow: ellipsis;
    
           }
    
           .btn{ // 组件类
    
             color:var(--color-primary);
    
             display: inline-block;
    
             width: 100rpx;
    
             height: 60rpx;
    
           }
    
           .btn:hover{ // 组件类
    
             color:var(--color-primary-dark);
    
           }
    
           .ellipsis { // 组件类
    
             overflow: hidden;
    
             text-overflow: ellipsis;
    
             white-space: nowrap;
    
           }
    
       -->
    
    

不必纠结这么多工具类样式很难记,因为这些类都基于原生样式且可以自定义的,搭配官方插件 Tailwind CSS IntelliSense还可以得到代码提示(小程序编辑器也支持)。

先写这么多,不知道是否有人关注tw在小程序中的应用,下篇预期发具体核心类编译配置,如果您感兴趣请点赞支持。

最后一次编辑于  2022-01-29  
点赞 3
收藏
评论
登录 后发表内容