taiwindcss在小程序中的应用
发布于 2 个月前 作者 wdeng 245 次浏览 来自 分享

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 {

    <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
    
    <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.2</span>;
    
    <span class="hljs-attribute">-webkit-text-size-adjust</span>: <span class="hljs-number">100%</span>;
    
    <span class="hljs-attribute">font-family</span>: <span class="hljs-string">"fontFamily.sans"</span>, ui-sans-serif, system-ui<span class="hljs-string">"
    

    }

    [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<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>
    

    >

    </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

    <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-primary hover_bg-primary-dark inline-block w-100 h-60
    
    whitespace-nowrap overflow-hidden overflow-ellipsis"</span>
    

    >

    工具类写法--按钮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在小程序中的应用,下篇预期发具体核心类编译配置,如果您感兴趣请点赞支持。

回到顶部