weapp-tailwindcss-children

在小程序中使用 child:.sibling,descendant,next 这些 variants 来增强开发吧。

• weapp-tailwindcss-children
  • Usage
    • Install
    • Usage in tailwind.config.js
  • Cases
    • Child variant
    • Heir variant
    • Sibling variant
    • Next variant

Usage

Install

1npm i -D weapp-tailwindcss-children
2# or
3yarn add -D weapp-tailwindcss-children

Usage in tailwind.config.js

1const { plugin , createPlugin} = require('weapp-tailwindcss-children')
2// use default
3plugins:[
4  plugin,
5]
6// use custom 
7plugins:[
8  createPlugin({
9    fallbackElements:['view']
10  }),
11]

Cases

Child variant

直接子代选择器 >, MDN Link

1<view class="p-4">
2  <view>child variant</view>
3  <view class="child:text-red-500 child:inline-block child:mr-2">
4    <view class="not-child">not-child view</view>
5    <view>view</view>
6    <text>text</text>
7    <view>view</view>
8    <view>view</view>
9  </view>
10</view>

1<view class="p-4">
2  <view>child-text variant</view>
3  <view class="child-text:text-red-500 child-text:mr-2">
4    <text>text</text>
5    <text>text</text>
6    <view>view</view>
7  </view>
8</view>

Heir variant

后代选择器 ·, MDN Link

1<view class="p-4">
2  <view>heir variant</view>
3  <view class="heir:text-red-500 heir-text:text-green-500 heir:mr-2">
4    <view class="not-heir">not-heir view</view>
5    <view>view <view>inner view <text>inner text</text><text class="not-heir-text">not-heir inner text</text></view>
6    </view>
7    <text>text</text>
8    <view>view</view>
9    <view>view</view>
10  </view>
11</view>

Sibling variant

通用兄弟选择器 ~, MDN Link

1<view class="p-4">
2  <view>Sibling variant</view>
3  <view>
4    <view>view</view>
5    <view class="twin:text-green-500 before:content-['*']">twin:ring-white hover:twin:shadow</view>
6    <view>view</view>
7    <view>view</view>
8  </view>
9</view>

Next variant

相邻兄弟选择器 +, MDN Link

1<view class="p-4">
2  <view>Next variant</view>
3  <view>
4    <view>view</view>
5    <view class="next:text-green-500 before:content-['*']">twin:ring-white hover:twin:shadow</view>
6    <view class="next-view:text-yellow-500">view</view>
7    <view class="next-text:text-red-500">view</view>
8    <text>text</text>
9  </view>
10</view>