weapp-tailwindcss-children
v0.1.0
Published
weapp-tailwindcss-children 增强 tailwindcss 的小程序的选择器
Downloads
51
Maintainers
Readme
weapp-tailwindcss-children
在小程序中使用 child:
.sibling
,descendant
,next
这些 variants
来增强开发吧。
Usage
Install
npm i -D weapp-tailwindcss-children
# or
yarn add -D weapp-tailwindcss-children
Usage in tailwind.config.js
const { plugin , createPlugin} = require('weapp-tailwindcss-children')
// use default
plugins:[
plugin,
]
// use custom
plugins:[
createPlugin({
fallbackElements:['view']
}),
]
Cases
Child variant
直接子代选择器 >
, MDN Link
<view class="p-4">
<view>child variant</view>
<view class="child:text-red-500 child:inline-block child:mr-2">
<view class="not-child">not-child view</view>
<view>view</view>
<text>text</text>
<view>view</view>
<view>view</view>
</view>
</view>
<view class="p-4">
<view>child-text variant</view>
<view class="child-text:text-red-500 child-text:mr-2">
<text>text</text>
<text>text</text>
<view>view</view>
</view>
</view>
Heir variant
后代选择器 ·
, MDN Link
<view class="p-4">
<view>heir variant</view>
<view class="heir:text-red-500 heir-text:text-green-500 heir:mr-2">
<view class="not-heir">not-heir view</view>
<view>view <view>inner view <text>inner text</text><text class="not-heir-text">not-heir inner text</text></view>
</view>
<text>text</text>
<view>view</view>
<view>view</view>
</view>
</view>
Sibling variant
通用兄弟选择器 ~
, MDN Link
<view class="p-4">
<view>Sibling variant</view>
<view>
<view>view</view>
<view class="twin:text-green-500 before:content-['*']">twin:ring-white hover:twin:shadow</view>
<view>view</view>
<view>view</view>
</view>
</view>
Next variant
相邻兄弟选择器 +
, MDN Link
<view class="p-4">
<view>Next variant</view>
<view>
<view>view</view>
<view class="next:text-green-500 before:content-['*']">twin:ring-white hover:twin:shadow</view>
<view class="next-view:text-yellow-500">view</view>
<view class="next-text:text-red-500">view</view>
<text>text</text>
</view>
</view>