Gathering detailed insights and metrics for weapp-tailwindcss-children
weapp-tailwindcss-children, tailwindcss-children for weapp
Installations
npm install weapp-tailwindcss-childrenDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Score
58.7
Supply Chain
96.4
Quality
72.8
Maintenance
100
Vulnerability
99.3
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
2
JavaScript
TypeScript
JavaScript (50.45%)
TypeScript (49.55%)
Developer
sonofmagic
Download Statistics
Total Downloads
1,650
Last Day
1
Last Week
4
Last Month
100
Last Year
905
GitHub Statistics
3 Stars
6 Commits
2 Watching
2 Branches
1 Contributors
Bundle Size
1.68 kB
Minified
779.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.1.0
Package Id
weapp-tailwindcss-children@0.1.0
Unpacked Size
16.30 kB
Size
4.34 kB
File Count
13
Total Downloads
Cumulative downloads
Total Downloads
1,650
Last day
0%
1
Compared to previous day
Last week
-94.1%
4
Compared to previous week
Last month
525%
100
Compared to previous month
Last year
177.6%
905
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
31
@rollup/plugin-alias@rollup/plugin-commonjs@rollup/plugin-json@rollup/plugin-node-resolve@rollup/plugin-replace@rollup/plugin-typescript@tsconfig/recommended@types/jest@types/node@typescript-eslint/eslint-plugin@typescript-eslint/parsercross-envdefudeleslinteslint-config-standardeslint-plugin-importeslint-plugin-jesteslint-plugin-neslint-plugin-promisejestpostcssrolluprollup-plugin-terserrollup-plugin-visualizerts-jestts-nodetslibttypescripttypescripttypescript-transform-paths
Versions
weapp-tailwindcss-children
在小程序中使用 child:.sibling,descendant,next 这些 variants 来增强开发吧。
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>
No vulnerabilities found.
No security vulnerabilities found.