置顶taiwindcss在小程序中的应用精选热门

2022-01-29

1994浏览

0评论

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 文件了。

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;

      /* ... */

    }

  }

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

      } 



  -->

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;

       }

   -->