taiwindcss在小程序中的应用
发布于 3 年前 作者 wdeng 958 次浏览 来自 分享

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

回到顶部