tailwind

pages/shoppingMall/shoppingMall.vue

@@ -1,6 +1,6 @@
 <template>
-	<view>
-		
+	<view class="text-blue-500">
+		1
 	</view>
 </template>
 
@@ -17,6 +17,6 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss">
+	
 </style>

uni_modules/jc-tailwind/changelog.md

@@ -0,0 +1,47 @@
+## 0.4.6（2023-06-13）
+- 新增 filter: ```grayscale```   ```grayscale-0```
+## 0.4.5（2023-06-13）
+- 新增文字active，如：``` active-text-black``` , ``` active-text-red-500```
+## 0.4.4（2023-05-30）
+- 增加```min-height```和```min-width```
+## 0.4.3（2023-05-26）
+- 更新示例
+## 0.4.2（2023-05-26）
+- 新增margin的auto, 如 ```mx-auto```
+- 隐藏demo的class列表，提升运行速度
+## 0.4.1（2023-05-11）
+- 更新文档
+## 0.4.0（2023-05-10）
+- [重要] 去除大量颜色透明度，减少体积，加快运行速度，颜色透明度只支持black和white
+## 0.3.3（2023-05-09）
+- readme文档调整
+## 0.3.2（2023-05-09）
+- [重要] 为了减少体积，去除  ```from-``` ```to-``` ```shadow-``` ```active-``` 支持的透明度
+## 0.3.1（2023-05-09）
+- readme文档调整
+## 0.3.0（2023-05-09）
+- [重要] 修复透明度穿透 支持的样式有 ```bg-``` ```text-``` ```border-``` ```from-``` ```to-``` ```shadow-``` ```active-```
+- 新增active 例如```active-black``` ```active-red-500```
+## 0.2.6（2023-05-06）
+- 新增样式 top-safe right-safe bottom-safe left-safe
+## 0.2.5（2023-04-27）
+- border-width 增加 border-3
+- font-size 增加 text-mini [26rpx] text-md [30rpx] 
+## 0.2.4（2023-04-24）
+- hbuildx支持到3.7.9
+- 修复高版本scss由rgb引发报错的问题
+## 0.2.3（2023-04-24）
+- hbuidx版本支持到3.7.12
+## 0.2.2（2023-04-23）
+- [重要] 修复透明色冲突，原单下划线'_'，变为双下划线'__'。例如 原 bg_black_50 改为 bg_black__50
+## 0.2.1（2023-04-21）
+- 修复渐变色和透明色冲突，原from-0_5 改为 from-0-5
+- 支持项目自定义主色调，并支持透明度
+## 0.2.0（2023-04-21）
+- 对原var变量中的颜色重新定义，支持透明度。如 --color-black: #000 变为 --color-black: 0 0 0
+- 所有支持颜色的css中均支持透明度变化。透明度从5到95，没级递增5。 如 bg-red-500_50 border-pink-500_75 text_black_75
+## 0.1.0（2023-04-19）
+基本整合了常用tailwind
+## 0.0.1（2023-04-13）
+因为tailwind不能直接引入到小程序。所以由此想整合一个简单版本的css库。
+等待第二版的发布吧！

uni_modules/jc-tailwind/components/Demo/Demo.vue

@@ -0,0 +1,79 @@
+<script setup>
+	// 废弃
+	import { ref, computed, getCurrentInstance, onMounted, nextTick } from 'vue'
+	const props = defineProps({
+		title: '',
+		maxHeight: {
+			default: 200
+		}
+	})
+	const instance = getCurrentInstance()
+	const demoContentRef = ref()
+	const more = ref(true)
+	const showMore = ref(false)
+	const styles = computed(() => {
+		return more.value ? {
+			maxHeight: `${props.maxHeight}rpx`,
+			overflow: 'hidden',
+		} : {}
+	})
+
+
+	onMounted(getDemoContentRef)
+	nextTick(getDemoContentRef)
+
+	function callback(data) {
+		const { height } = data
+		showMore.value = height > uni.upx2px(props.maxHeight)
+		more.value = height > uni.upx2px(props.maxHeight)
+	}
+
+	function getDemoContentRef() {
+		let query = uni.createSelectorQuery().in(instance)
+		query.select('.demoContent')
+			.fields({ rect: true, size: true, scrollOffset: true }, callback)
+			// .boundingClientRect(callback)
+			.exec()
+	}
+
+	function toggleMore() {
+		more.value = !more.value
+	}
+</script>
+
+<template>
+	<view>
+		<view class="p-2 bg-slate-500 sticky t-0 flex item-center">
+			<view class="flex-1 font-medium font-bold text-base text-slate-50">{{title}}</view>
+			<view class="text-slate-200 text-center p-0-5 text-xs font-light" @tap="toggleMore" v-if="showMore">
+				<text v-if="more">更多 ↓</text>
+				<text v-else>收起 ↑ </text>
+			</view>
+		</view>
+		<view class="p-2 bg-white" :style="styles" :class="{more: showMore && more}">
+			<view class="demoContent">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+
+
+<style lang="scss" scoped>
+	.more {
+		position: relative;
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			height: 64rpx;
+			width: 100%;
+			border-radius: 4rpx 4rpx 0 0;
+			background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.5));
+			// backdrop-filter: blur(4rpx) saturate(50%);
+			// box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, .25);
+		}
+	}
+</style>

uni_modules/jc-tailwind/components/JcDemo/JcDemo.vue

@@ -0,0 +1,72 @@
+<script setup>
+	import { computed, nextTick, ref } from "vue";
+	const props = defineProps({
+		title: '',
+		classes: {
+			default: []
+		},
+		scss: '',
+		hasShowClass: {
+			default: true
+		}
+	})
+	
+	const showClasses = ref(false)
+	
+	function toggleShowClasses() {
+		showClasses.value = !showClasses.value
+	}
+
+	function copy({ name }) {
+		uni.setClipboardData({
+			data: name
+		})
+	}
+</script>
+
+<template>
+	<view>
+		<view class="p-2 sticky top-0 z-10 flex items-center bg-slate-100">
+			<view class="flex-1 font-medium font-bold font-sans text-2xl">{{title}}</view>
+			<view class="text-blue-500" @tap="toggleShowClasses" v-if="hasShowClass">查看</view>
+		</view>
+		<view class="p-2 bg-white" v-if="classes.length || $slots.default">
+			<view class="border-b-2 border-slate-100 mb-3-5 " v-if="classes.length && showClasses">
+				<view class="pb-2 flex items-center border-b-2 border-slate-100 text-slate-700 text-xs">
+					<view class="flex-1 font-medium mr-2">Class</view>
+					<view class="font-medium">Properties</view>
+				</view>
+				<view class="max-h-96 overflow-auto">
+					<view v-for="d, i in classes" :key="i" @tap="copy(d)">
+						<view class="p-2 border-slate-100 flex items-center font-mono text-xs whitespace-nowrap overflow-auto" :class="{'border-t': i > 0}">
+							<view class="flex-1 text-sky-500 mr-6 flex items-center">
+								<text class="mr-2 w-4 h-4" :style="{backgroundColor: d.bgcolor}" v-if="d.bgcolor != undefined" @tap.stop="copy({name: d.bgcolor})"></text>
+								<text class="mr-2 font-medium text-base" :style="{color: d.textcolor}" v-if="d.textcolor != undefined" @tap.stop="copy({name: d.textcolor})">Aa</text>
+								{{d.name}}
+							</view>
+							<view class="text-indigo-500">
+								<view class="flex items-center" v-for="v, k in d.value" :key="k">
+									<text>{{v.value ? v.value : v}}</text>
+									<template v-if="v.value != undefined">
+										<text class="text-indigo-300 ml-2" v-if="v.rpx != undefined">/* {{v.rpx}}rpx */</text>
+										<text class="text-indigo-300 ml-2" v-if="v.percent != undefined">/* {{v.percent}} */</text>
+										<text class="text-indigo-300 ml-2" v-if="v.desc != undefined">/* {{v.desc}} */</text>
+									</template>
+									<template v-else>
+										<text class="text-indigo-300 ml-2" v-if="d.rpx != undefined">/* {{d.rpx}}rpx */</text>
+										<text class="text-indigo-300 ml-2" v-if="d.percent != undefined">/* {{d.percent}} */</text>
+										<text class="text-indigo-300 ml-2" v-if="d.desc != undefined">/* {{d.desc}} */</text>
+									</template>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view :class="{'relative rounded-xl overflow-auto p-2 border border-slate-200 bg-slate-50 box-border': $slots.default}">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>

uni_modules/jc-tailwind/components/TwBackgrounds/TwBackgrounds.vue

@@ -0,0 +1,73 @@
+<script setup>
+	import useBackgrounds from '../../hooks/useBackgrounds.js'
+
+	const { BackgroundAttachment, BackgroundClip, BackgroundColor, BackgroundOrigin, BackgroundPosition, BackgroundRepeat, BackgroundSize, BackgroundImage, GradientColorStops } = useBackgrounds()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="BackgroundAttachment"></JcDemo>
+		<JcDemo v-bind="BackgroundClip"></JcDemo>
+		<JcDemo v-bind="BackgroundColor">
+			<view class="gap-4 grid grid-cols-2">
+				<view class="h-14 text-white flex items-center justify-center shadow-lg rounded-lg bg-black">bg-black</view>
+				<view class="h-14 text-white flex items-center justify-center shadow-lg rounded-lg bg-black__50"><text class="text-white">bg-black__50</text></view>
+				<view class="h-14 flex text-white shadow-lg rounded-lg bg-black">
+					<view class="flex-1 m-2 text-black flex items-center justify-center shadow-lg rounded-lg bg-white">bg-white</view>
+				</view>
+				<view class="h-14 flex text-white shadow-lg rounded-lg bg-black">
+					<view class="flex-1 m-2 text-black flex items-center justify-center shadow-lg rounded-lg bg-white__50">bg-white__50</view>
+				</view>
+				
+				<template v-for="d, i in ['slate','gray','zinc','neutral','stone','red','orange','amber','yellow','lime','green','emerald','teal','cyan','sky','blue','indigo','violet','purple','fuchsia','pink','rose']" :key="i">
+					<view class="h-14 text-white flex items-center justify-center shadow-lg rounded-lg" :class="`bg-${d}-500`">bg-{{d}}-500</view>
+				</template>
+				
+				<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-stripes-indigo">bg-stripes-indigo</view>
+				<view class="h-14 flex items-center justify-center bg-indigo-500 bg-stripes-white rounded-lg text-white"></view>
+				
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="BackgroundOrigin"></JcDemo>
+		<JcDemo v-bind="BackgroundPosition"></JcDemo>
+		<JcDemo v-bind="BackgroundRepeat"></JcDemo>
+		<JcDemo v-bind="BackgroundSize"></JcDemo>
+		<JcDemo v-bind="BackgroundImage">
+			<view class="space-y-4">
+				<view class="h-14 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-r from-sky-500 to-indigo-500"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-r from-violet-500 to-fuchsia-500"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500"></view>
+			</view>
+
+			<view class="space-y-4 mt-4">
+				<view class="h-14 rounded-lg bg-gradient-to-t from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-tr from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-r from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-br from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-b from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-bl from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-l from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-tl from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="GradientColorStops">
+			<view class="space-y-4">
+				<view class="h-10 rounded-lg bg-gradient-to-r from-blue-500"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-2"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-3"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-4"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-5"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-6"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-7"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-8"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-9"></view>
+			</view>
+		</JcDemo>
+	</view>
+</template>
+
+
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwBorders/TwBorders.vue

@@ -0,0 +1,73 @@
+<script setup>
+	import useBorders from '../../hooks/useBorders.js'
+	const { BorderRadius, BorderWidth, BorderColor, BorderStyle, DivideWidth, DivideColor, DivideStyle, OutlineWidth, OutlineColor, OutlineStyle, OutlineOffset, RingWidth, RingColor, RingOffsetWidth, RingOffsetColor } = useBorders()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="BorderRadius">
+			<view class="grid grid-cols-2 gap-4 text-white text-sm text-center font-bold leading-6">
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded</view>
+					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded-md</view>
+					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded-md"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded-lg</view>
+					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded-lg"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded-full</view>
+					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded-full"></view>
+				</view>
+			</view>
+		</JcDemo>
+
+		<JcDemo v-bind="BorderWidth">
+			<div class="grid grid-cols-2 gap-4 text-white text-sm text-center font-bold leading-6">
+				<div class="flex flex-col items-center shrink-0">
+					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border</p>
+					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border"></div>
+				</div>
+				<div class="flex flex-col items-center shrink-0">
+					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border-2</p>
+					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border-2"></div>
+				</div>
+				<div class="flex flex-col items-center shrink-0">
+					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border-4</p>
+					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border-4"></div>
+				</div>
+				<div class="flex flex-col items-center shrink-0">
+					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border-8</p>
+					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border-8"></div>
+				</div>
+			</div>
+		</JcDemo>
+		<JcDemo v-bind="BorderColor">
+			<view class="relative rounded-xl overflow-auto p-8">
+			<view class="max-w-xs mx-auto space-y-1">
+				<view class="text-slate-900 text-sm font-medium">Email address</view>
+				<view>
+					<input type="text" placeholder="jane@example.com" class="font-sans block text-sm leading-5 py-2 px-3 border-2 border-rose-600 text-slate-500 rounded-lg shadow-sm focus:outline-none focus:ring focus:ring-rose-200 focus:border-rose-500">
+				</view>
+			</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="BorderStyle"></JcDemo>
+
+		<!-- <JcDemo v-bind="DivideWidth"></JcDemo>
+		<JcDemo v-bind="DivideColor"></JcDemo>
+		<JcDemo v-bind="DivideStyle"></JcDemo>
+		<JcDemo v-bind="OutlineWidth"></JcDemo>
+		<JcDemo v-bind="OutlineColor"></JcDemo>
+		<JcDemo v-bind="OutlineStyle"></JcDemo>
+		<JcDemo v-bind="OutlineOffset"></JcDemo>
+		<JcDemo v-bind="RingWidth"></JcDemo>
+		<JcDemo v-bind="RingColor"></JcDemo>
+		<JcDemo v-bind="RingOffsetWidth"></JcDemo>
+		<JcDemo v-bind="RingOffsetColor"></JcDemo> -->
+	</view>
+</template>

uni_modules/jc-tailwind/components/TwEffects/TwEffects.vue

@@ -0,0 +1,92 @@
+<script setup>
+	import useEffects from '../../hooks/useEffects.js'
+	const { BoxShadow, BoxShadowColor, Opacity, MixBlendMode, BackgroundBlendMode } = useEffects()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="BoxShadow">
+			<view class="grid grid-cols-2 gap-12 font-mono font-bold shrink-0 p-8">
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-md</view>
+					<view class="w-24 h-24 rounded-lg bg-white shadow-md"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-lg</view>
+					<view class="w-24 h-24 rounded-lg bg-white shadow-lg"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-xl</view>
+					<view class="w-24 h-24 rounded-lg bg-white shadow-xl"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-2xl</view>
+					<view class="w-24 h-24 rounded-lg bg-white shadow-2xl"></view>
+				</view>
+			</view>
+
+		</JcDemo>
+		<JcDemo v-bind="BoxShadowColor">
+			<view class="grid grid-cols-2 justify-center gap-2 p-4">
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-cyan-500</view>
+					<button class="py-2 px-3 bg-cyan-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-cyan-500 focus:outline-none">Subscribe</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-blue-500</view>
+					<button class="py-2 px-3 bg-blue-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-blue-500 focus:outline-none">Subscribe</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-indigo-500</view>
+					<button class="py-2 px-3 bg-indigo-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-indigo-500 focus:outline-none">Subscribe</button>
+				</view>
+			</view>
+			
+			<view class="grid grid-cols-2 justify-center gap-2 p-4 mt-2">
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-cyan-500__50</view>
+					<view class="shadow-lg shadow-cyan-500__50 rounded-md">
+						<button class="py-2 px-3 bg-cyan-500 text-white rounded-md text-sm font-semibold rounded-md ">Subscribe</button>
+					</view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-blue-500__50</view>
+					<view class="shadow-lg shadow-blue-500__50 rounded-md">
+						<button class="py-2 px-3 bg-blue-500 text-white rounded-md text-sm font-semibold rounded-md ">Subscribe</button>
+					</view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-indigo-500__50</view>
+					<view class="shadow-lg shadow-indigo-500__50 rounded-md">
+						<button class="py-2 px-3 bg-indigo-500 text-white rounded-md text-sm font-semibold rounded-md ">Subscribe</button>
+					</view>
+				</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="Opacity">
+			<view class="grid grid-cols-2 items-center justify-center gap-8  text-white text-sm font-bold leading-6">
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-100</view>
+					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-100">Button A</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-75</view>
+					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-75">Button B</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-50</view>
+					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-50">Button C</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-25</view>
+					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-25">Button D</button>
+				</view>
+			</view>
+		</JcDemo>
+		<!-- <JcDemo v-bind="MixBlendMode"></JcDemo> -->
+		<!-- <JcDemo v-bind="BackgroundBlendMode"></JcDemo> -->
+	</view>
+</template>
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwFilters/TwFilters.vue

@@ -0,0 +1,30 @@
+<script setup>
+	import useFilters from '../../hooks/useFilters.js'
+	const { Blur, Brightness, Contrast, DropShadow, Grayscale, HueRotate, Invert, Saturate, Sepia, BackdropBlur, BackdropBrightness, BackdropContrast, BackdropGrayscale, BackdropHueRotate, BackdropInvert, BackdropOpacity, BackdropSaturate, BackdropSepia } = useFilters()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="Blur"></JcDemo>
+		<!-- <JcDemo v-bind="Brightness"></JcDemo> -->
+		<!-- <JcDemo v-bind="Contrast"></JcDemo> -->
+		<JcDemo v-bind="DropShadow"></JcDemo>
+		<!-- <JcDemo v-bind="Grayscale"></JcDemo> -->
+		<!-- <JcDemo v-bind="HueRotate"></JcDemo> -->
+		<!-- <JcDemo v-bind="Invert"></JcDemo> -->
+		<!-- <JcDemo v-bind="Saturate"></JcDemo> -->
+		<!-- <JcDemo v-bind="Sepia"></JcDemo> -->
+		<JcDemo v-bind="BackdropBlur"></JcDemo>
+		<!-- <JcDemo v-bind="BackdropBrightness"></JcDemo> -->
+		<!-- <JcDemo v-bind="BackdropContrast"></JcDemo> -->
+		<!-- <JcDemo v-bind="BackdropGrayscale"></JcDemo> -->
+		<!-- <JcDemo v-bind="BackdropHueRotate"></JcDemo> -->
+		<!-- <JcDemo v-bind="BackdropInvert"></JcDemo> -->
+		<JcDemo v-bind="BackdropOpacity"></JcDemo>
+		<!-- <JcDemo v-bind="BackdropSaturate"></JcDemo> -->
+		<!-- <JcDemo v-bind="BackdropSepia"></JcDemo> -->
+	</view>
+</template>
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwFlexboxGrid/TwFlexboxGrid.vue

@@ -0,0 +1,67 @@
+<script setup>
+	import useSizes from '../../hooks/useSizes.js'
+	import useFlexboxGrid from '../../hooks/useFlexboxGrid.js'
+	
+	const { Sizes, Percents, Xls, Pxs, Pcts } = useSizes()
+	
+	const {
+		FlexBasis,
+		FlexDirection,
+		FlexWrap,
+		Flex,
+		FlexGrow,
+		FlexShrink,
+		Order,
+		GridTemplateColumns,
+		GridColumnStartEnd,
+		GridTemplateRows,
+		GridRowStartEnd,
+		GridAutoFlow,
+		GridAutoColumns,
+		GridAutoRows,
+		Gap,
+		JustifyContent,
+		JustifyItems,
+		JustifySelf,
+		AlignContent,
+		AlignItems,
+		AlignSelf,
+		PlaceContent,
+		PlaceItems,
+		PlaceSelf
+	} = useFlexboxGrid()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="FlexBasis"></JcDemo>
+		<JcDemo v-bind="FlexDirection"></JcDemo>
+		<JcDemo v-bind="FlexWrap" />
+		<JcDemo v-bind="Flex" />
+		<JcDemo v-bind="FlexGrow" />
+		<JcDemo v-bind="FlexShrink" />
+		<JcDemo v-bind="Order" />
+		<JcDemo v-bind="GridTemplateColumns" />
+		<JcDemo v-bind="GridColumnStartEnd" />
+		<JcDemo v-bind="GridTemplateRows" />
+		<JcDemo v-bind="GridRowStartEnd" />
+		<JcDemo v-bind="GridAutoFlow" />
+		<JcDemo v-bind="GridAutoColumns" />
+		<JcDemo v-bind="GridAutoRows" />
+		<JcDemo v-bind="Gap" />
+		<JcDemo v-bind="JustifyContent" />
+		<JcDemo v-bind="JustifyItems" />
+		<JcDemo v-bind="JustifySelf" />
+		<JcDemo v-bind="AlignContent" />
+		<JcDemo v-bind="AlignItems" />
+		<JcDemo v-bind="AlignSelf" />
+		<JcDemo v-bind="PlaceContent" />
+		<JcDemo v-bind="PlaceItems" />
+		<JcDemo v-bind="PlaceSelf" />
+	</view>
+</template>
+
+
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwInteractivity/TwInteractivity.vue

@@ -0,0 +1,29 @@
+<script setup>
+	import useInteractivity from '../../hooks/useInteractivity.js'
+	const { AccentColor, Appearance, Cursor, CaretColor, PointerEvents, Resize, ScrollBehavior, ScrollMargin, ScrollPadding, ScrollSnapAlign, ScrollSnapStop, ScrollSnapType, TouchAction, xxx, UserSelect, WillChange } = useInteractivity()
+</script>
+
+<template>
+	<view>
+		<!-- <JcDemo v-bind="AccentColor"></JcDemo> -->
+		<JcDemo v-bind="Appearance"></JcDemo>
+		<!-- <JcDemo v-bind="Cursor"></JcDemo> -->
+		<!-- <JcDemo v-bind="CaretColor"></JcDemo> -->
+		<JcDemo v-bind="PointerEvents"></JcDemo>
+		<!-- <JcDemo v-bind="Resize"></JcDemo> -->
+		<JcDemo v-bind="ScrollBehavior"></JcDemo>
+		<!-- <JcDemo v-bind="ScrollMargin"></JcDemo>
+		<JcDemo v-bind="ScrollPadding"></JcDemo>
+		<JcDemo v-bind="ScrollSnapAlign"></JcDemo>
+		<JcDemo v-bind="ScrollSnapStop"></JcDemo>
+		<JcDemo v-bind="ScrollSnapType"></JcDemo>
+		<JcDemo v-bind="TouchAction"></JcDemo> -->
+		<JcDemo v-bind="UserSelect"></JcDemo>
+		<JcDemo v-bind="WillChange"></JcDemo>
+	</view>
+</template>
+
+
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwLayout/TwLayout.vue

@@ -0,0 +1,37 @@
+<script setup>
+	import useLayout from '../../hooks/useLayout.js'
+
+	const { AspectRatio1, AspectRatio, BoxSizing, Display, Floats, Clear, Isolation, ObjectFit, ObjectPosition, Overflow, OverscrollBehavior, Position, TopRightBottomLeft, Visibility, ZIndex } = useLayout()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="AspectRatio"></JcDemo>
+
+		<!-- <JcDemo title="Container"></JcDemo>
+		<JcDemo title="Columns"></JcDemo>
+		<JcDemo title="Break After"></JcDemo>
+		<JcDemo title="Break Before"></JcDemo>
+		<JcDemo title="Break Inside"></JcDemo>
+		<JcDemo title="Box Decoration Break"></JcDemo> -->
+
+		<JcDemo v-bind="BoxSizing"></JcDemo>
+		<JcDemo v-bind="Display" :col="3"></JcDemo>
+		<JcDemo v-bind="Floats"></JcDemo>
+		<JcDemo v-bind="Clear"></JcDemo>
+		<JcDemo v-bind="Isolation"></JcDemo>
+		<JcDemo v-bind="ObjectFit"></JcDemo>
+		<JcDemo v-bind="ObjectPosition"></JcDemo>
+		<JcDemo v-bind="Overflow"></JcDemo>
+		<JcDemo v-bind="OverscrollBehavior"></JcDemo>
+		<JcDemo v-bind="Position"></JcDemo>
+		<JcDemo v-bind="TopRightBottomLeft"></JcDemo>
+		<JcDemo v-bind="Visibility"></JcDemo>
+		<JcDemo v-bind="ZIndex"></JcDemo>
+	</view>
+</template>
+
+
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwReadme/TwReadme.vue

@@ -0,0 +1,73 @@
+<script setup>
+	import useVars from '../../hooks/useVars.js'
+	import useColor from '../../hooks/useColor.js'
+
+	const { pxs, percents, border_radius, xls, opacitys } = useVars()
+	const { colors, color } = useColor()
+
+	function copy(data) {
+		uni.setClipboardData({ data: `${data}` })
+	}
+</script>
+
+<template>
+	<JcDemo :hasShowClass="false" title="透明度">
+		<template v-for="d, i in opacitys" :key="i">
+			<view class="px-2 py-1 border-b border-slate-100" @tap="copy(d.opacity)">
+				{{d.value}}  
+				<text class="text-slate-300 text-xs font-mono ml-2">// {{d.calc}} = {{d.opacity}}</text>
+			</view>
+		</template>
+	</JcDemo>
+	
+	<JcDemo :hasShowClass="false" title="尺寸">
+		<template v-for="d, i in pxs" :key="i">
+			<view class="px-2 py-1 border-b border-slate-100" @tap="copy(d.rpx)">
+				{{d.value}}  
+				<text class="text-slate-300 text-xs font-mono ml-2">// {{d.rpx}}rpx</text>
+			</view>
+		</template>
+	</JcDemo>
+	
+	<JcDemo :hasShowClass="false" title="百分比">
+		<template v-for="d, i in percents" :key="i">
+			<view class="px-2 py-1 border-b border-slate-100" @tap="copy(d.percent)">
+				{{d.value}}
+				<text class="text-slate-300 text-xs font-mono ml-2">// {{d.percent}}</text>
+			</view>
+		</template>
+	</JcDemo>
+	
+	<JcDemo :hasShowClass="false" title="圆角">
+		<template v-for="d, i in border_radius" :key="i">
+			<view class="px-2 py-1 border-b border-slate-100" @tap="copy(d.rpx)">
+				{{d.value}}
+				<text class="text-slate-300 text-xs font-mono ml-2">// {{d.rpx}}rpx</text>
+			</view>
+		</template>
+	</JcDemo>
+	
+	<JcDemo :hasShowClass="false" title="文字">
+		<template v-for="d, i in xls" :key="i">
+			<view class="px-2 py-1 border-b border-slate-100" @tap="copy(d.rpx)">
+				{{d.value}}
+				<text class="text-slate-300 text-xs font-mono ml-2">// {{d.rpx}}</text>
+			</view>
+		</template>
+	</JcDemo>
+	
+	<JcDemo :hasShowClass="false" title="颜色">
+		<template v-for="d, i in color" :key="i">
+			<view class="px-2 py-1 border-b border-slate-100 flex items-center" @tap="copy(d.color)">
+				{{d.value}}  
+				<text class="text-slate-300 text-xs font-mono ml-2">// {{d.color}}</text>
+				<text class="w-6 h-6 ml-4 border border-slate-200" :style="{background: d.color}"></text>
+			</view>
+		</template>
+	</JcDemo>
+	
+	
+</template>
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwSizing/TwSizing.vue

@@ -0,0 +1,102 @@
+<script setup>
+	import useSizing from '../../hooks/useSizing.js'
+
+	const { Width, Height, MaxHeight } = useSizing()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="Width">
+			<view class="relative rounded-xl overflow-auto">
+				<view class="flex justify-center">
+					<view class="space-y-2 font-mono font-bold text-xs text-center text-white">
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-80 hidden sm:block">w-80</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-64 hidden sm:block">w-64</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-48">w-48</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-40">w-40</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-32">w-32</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-24">w-24</view>
+					</view>
+				</view>
+			</view>
+
+
+			<view class="relative rounded-xl overflow-auto mt-2">
+				<view class="space-y-2 font-mono font-bold text-xs text-white">
+					<view class="flex space-x-2">
+						<view class="w-1_2 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_2</view>
+						<view class="w-1_2 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_2</view>
+					</view>
+					<view class="flex space-x-2">
+						<view class="w-2_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2_5</view>
+						<view class="w-3_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3_5</view>
+					</view>
+					<view class="flex space-x-2">
+						<view class="w-1_3 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_3</view>
+						<view class="w-2_3 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2_3</view>
+					</view>
+					<view class="space-x-2 hidden sm:flex">
+						<view class="w-1_4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_4</view>
+						<view class="w-3_4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3_4</view>
+					</view>
+					<view class="space-x-2 hidden sm:flex">
+						<view class="w-1_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_5</view>
+						<view class="w-4_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-4_5</view>
+					</view>
+					<view class="space-x-2 hidden sm:flex">
+						<view class="w-1_6 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_6</view>
+						<view class="w-5_6 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-5_6</view>
+					</view>
+					<view class="w-full py-2 bg-violet-500 rounded-lg shadow-lg text-center text-white font-mono">w-full</view>
+				</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="Height">
+			<view class="flex justify-center items-end space-x-4 font-mono font-bold text-xs text-center text-white">
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-96 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-96</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-80 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-80</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-64 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-64</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-48 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-48</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-40 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-40</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-32 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-32</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-24 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-24</view>
+					</view>
+				</view>
+			</view>
+		</JcDemo>
+		
+		<JcDemo v-bind="MaxHeight"></JcDemo>
+
+	</view>
+</template>
+
+
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwSpacing/TwSpacing.vue

@@ -0,0 +1,87 @@
+<script setup>
+	import useSpacing from '../../hooks/useSpacing.js'
+
+	const { Padding, Margin, SpaceBetween } = useSpacing()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="Padding">
+			<view class="grid grid-cols-4 gap-2 text-white font-mono text-center">
+				<view class="bg-purple-500 shadow-lg rounded-lg overflow-hidden">
+					<view class="h-6 bg-stripes-white rounded-t-lg"></view>
+					<view class="p-4">pt-6</view>
+				</view>
+
+				<view class="flex bg-purple-500 shadow-lg rounded-lg overflow-hidden">
+					<view class="flex-1 flex items-center justify-center">pr-4</view>
+					<view class="w-4 bg-stripes-white rounded-r"></view>
+				</view>
+
+				<view class="bg-purple-500 shadow-lg rounded-lg overflow-hidden">
+					<view class="p-4">pb-8</view>
+					<view class="h-8 bg-stripes-white rounded-b-lg"></view>
+				</view>
+
+				<view class="flex bg-purple-500 shadow-lg rounded-lg overflow-hidden">
+					<view class="w-2 bg-stripes-white rounded-l"></view>
+					<view class="flex-1 flex items-center justify-center">pl-2</view>
+				</view>
+			</view>
+
+			<view class="flex justify-center font-mono text-white text-sm font-bold leading-6">
+				<view class="flex bg-indigo-500 shadow-lg rounded-lg overflow-hidden text-white mt-2 font-mono">
+					<view class="w-8 bg-stripes-white"></view>
+					<view class="flex-1 p-4 text-center">px-8</view>
+					<view class="w-8 bg-stripes-white"></view>
+				</view>
+			</view>
+
+			<view class="flex justify-center font-mono text-white text-sm font-bold leading-6">
+				<view class="bg-pink-500 shadow-lg rounded-lg overflow-hidden text-white mt-2 font-mono">
+					<view class="h-8 bg-stripes-white"></view>
+					<view class="p-4 text-center">py-8</view>
+					<view class="h-8 bg-stripes-white"></view>
+				</view>
+			</view>
+		</JcDemo>
+
+		<JcDemo v-bind="Margin"></JcDemo>
+
+		<JcDemo v-bind="SpaceBetween">
+			<view class="flex space-x-4  bg-stripes-indigo rounded-lg text-white bg-slate-200">
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">01</view>
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">02</view>
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">03</view>
+			</view>
+			<view class="flex flex-row-reverse space-x-4 space-x-reverse bg-stripes-cyan rounded-lg text-white bg-slate-300 mt-2">
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">01</view>
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">02</view>
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">03</view>
+			</view>
+
+			<view class="grid grid-cols-2 gap-2 mt-2">
+				<view class="bg-slate-200">
+					<view class="flex flex-col space-y-4 bg-stripes-indigo rounded-lg text-white">
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">01</view>
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">02</view>
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">03</view>
+					</view>
+				</view>
+				<view class="bg-slate-300">
+					<view class="flex flex-col flex-col-reverse space-y-4 space-y-reverse bg-stripes-cyan rounded-lg text-white">
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">01</view>
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">02</view>
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">03</view>
+					</view>
+				</view>
+			</view>
+		</JcDemo>
+
+	</view>
+</template>
+
+
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwTransforms/TwTransforms.vue

@@ -0,0 +1,20 @@
+<script setup>
+	import useTransforms from '../../hooks/useTransforms.js'
+	
+	const { Scale, Rotate, Translate, Skew, TransformOrigin } = useTransforms()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="Scale"></JcDemo>
+		<JcDemo v-bind="Rotate"></JcDemo>
+		<JcDemo v-bind="Translate"></JcDemo>
+		<JcDemo v-bind="Skew"></JcDemo>
+		<JcDemo v-bind="TransformOrigin"></JcDemo>
+	</view>
+</template>
+
+
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwTransitionsAnimation/TwTransitionsAnimation.vue

@@ -0,0 +1,58 @@
+<script setup>
+	import useTransitionsAnimation from '../../hooks/useTransitionsAnimation.js'
+	const { TransitionProperty, TransitionDuration, TransitionTimingFunction, TransitionDelay, Animation } = useTransitionsAnimation()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="TransitionProperty"></JcDemo>
+		<JcDemo v-bind="TransitionDuration"></JcDemo>
+		<JcDemo v-bind="TransitionTimingFunction"></JcDemo>
+		<JcDemo v-bind="TransitionDelay"></JcDemo>
+		<JcDemo v-bind="Animation">
+			<view class="text-lg p-2">Spin</view>
+			<view class="flex items-center justify-center">
+				<button type="button" class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-indigo-500 transition ease-in-out duration-150 cursor-not-allowed" disabled="">
+					<text class="animate-spin -ml-1 mr-3 h-5 w-5 text-white border-2 border-indigo-50 border-t-transparent rounded-full"></text>
+					Processing...
+				</button>
+			</view>
+
+			<view class="text-lg p-2">Ping</view>
+			<view class="flex items-center justify-center">
+				<view class="relative inline-flex">
+					<button type="button" class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-sky-500 bg-white  transition ease-in-out duration-150 cursor-not-allowed ring-1 ring-slate-900 " disabled="">
+						Transactions
+					</button>
+					<view class="flex absolute h-3 w-3 top-0 right-0 -mt-1 -mr-1">
+						<text class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></text>
+						<text class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></text>
+					</view>
+				</view>
+			</view>
+
+			<view class="text-lg p-2">Pulse</view>
+			<view class="bg-white  p-4  rounded-lg shadow-lg max-w-xs w-full h-28">
+				<view class="flex space-x-4 animate-pulse">
+					<view class="rounded-full bg-slate-200 h-10 w-10"></view>
+					<view class="flex-1 space-y-6 py-1">
+						<view class="h-2 bg-slate-200 rounded"></view>
+						<view class="space-y-3">
+							<view class="grid grid-cols-3 gap-4">
+								<view class="h-2 bg-slate-200 rounded col-span-2"></view>
+								<view class="h-2 bg-slate-200 rounded col-span-1"></view>
+							</view>
+							<view class="h-2 bg-slate-200 rounded"></view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="text-lg p-2">Bounce</view>
+			<view class="animate-bounce bg-white  p-2 w-10 h-10 ring-1 ring-slate-900  shadow-lg rounded-full flex items-center justify-center"></view>
+		</JcDemo>
+	</view>
+</template>
+
+<style>
+</style>

uni_modules/jc-tailwind/components/TwTypography/TwTypography.vue

@@ -0,0 +1,159 @@
+<script setup>
+	import useTypography from '../../hooks/useTypography.js'
+	const {
+		FontFamily,
+		FontSize,
+		FontSmoothing,
+		FontStyle,
+		FontWeight,
+		FontVariantNumeric,
+		LetterSpacing,
+		LineClamp,
+		LineHeight,
+		ListStyleImage,
+		ListStylePosition,
+		ListStyleType,
+		TextAlign,
+		TextColor,
+		TextDecoration,
+		TextDecorationColor,
+		TextDecorationStyle,
+		TextDecorationThickness,
+		TextUnderlineOffset,
+		TextTransform,
+		TextOverflow,
+		TextIndent,
+		VerticalAlign,
+		Whitespace,
+		WordBreak,
+		Hyphens,
+		Content
+	} = useTypography()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="FontFamily"></JcDemo>
+		<JcDemo v-bind="FontSize">
+			<view class="flex flex-col gap-8">
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-sm</text>
+					<view class="text-sm font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-base</text>
+					<view class="text-base font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-lg</text>
+					<view class="text-lg font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-xl</text>
+					<view class="text-xl font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-2xl</text>
+					<view class="text-2xl font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+			</view>
+		</JcDemo>
+		<!-- <JcDemo v-bind="FontSmoothing"></JcDemo> -->
+		<JcDemo v-bind="FontStyle"></JcDemo>
+		<JcDemo v-bind="FontWeight"></JcDemo>
+		<JcDemo v-bind="FontVariantNumeric"></JcDemo>
+		<JcDemo v-bind="LetterSpacing">
+			<view class="flex flex-col gap-8">
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">tracking-tight</text>
+					<view class="tracking-tight text-lg font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">tracking-normal</text>
+					<view class="tracking-normal text-lg font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">tracking-wide</text>
+					<view class="tracking-wide text-lg font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="LineClamp">
+			<view class="mx-auto max-w-sm bg-white p-8 text-sm leading-6 text-slate-700 shadow-xl ">
+				<view datetime="2020-03-16" class="block text-sm leading-6 text-slate-500 ">Mar 10, 2020</view>
+				<view class="mt-2 text-lg font-semibold text-slate-900 ">Boost your conversion rate</view>
+				<view class="line-clamp-3 mt-4 text-sm leading-6 text-slate-500 ">Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.</view>
+				<view class="mt-4 flex gap-x-2.5 text-sm font-semibold leading-6 text-slate-900 ">
+					<img class="h-6 w-6 flex-none rounded-full bg-slate-50 " src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
+					Lindsay Walton
+				</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="LineHeight"></JcDemo>
+		<!-- <JcDemo v-bind="ListStyleImage"></JcDemo> -->
+		<!-- <JcDemo v-bind="ListStylePosition"></JcDemo> -->
+		<!-- <JcDemo v-bind="ListStyleType"></JcDemo> -->
+		<JcDemo v-bind="TextAlign">
+			<view class="space-y-2">
+				<view class="text-left">text-left</view>
+				<view class="text-center">text-center</view>
+				<view class="text-right">text-right</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="TextColor">
+			<view class="text-xl font-medium leading-6 space-y-2">
+				<view class="text-blue-600">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-500">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-400">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-300">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-200">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-100">The quick brown fox jumps over the lazy dog.</view>
+			</view>
+			<view class="p-2 my-2 bg-black__5">透明度[只支持white,black]</view>
+			<view class="text-xl font-medium leading-6 space-y-2">
+				<view class="text-black">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-black__75">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-black__50">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-black__5">The quick brown fox jumps over the lazy dog.</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="TextDecoration"></JcDemo>
+		<JcDemo v-bind="TextDecorationColor"></JcDemo>
+		<JcDemo v-bind="TextDecorationStyle"></JcDemo>
+		<JcDemo v-bind="TextDecorationThickness"></JcDemo>
+		<JcDemo v-bind="TextUnderlineOffset"></JcDemo>
+		<JcDemo v-bind="TextTransform"></JcDemo>
+		<JcDemo v-bind="TextOverflow">
+			<view class="truncate">
+				The longest word in any of the major English language dictionaries is <text class="text-slate-900 font-medium">pneumonoultramicroscopicsilicovolcanoconiosis,</text> a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="TextIndent"></JcDemo>
+		<JcDemo v-bind="VerticalAlign"></JcDemo>
+		<JcDemo v-bind="Whitespace"></JcDemo>
+		<JcDemo v-bind="WordBreak"></JcDemo>
+		<JcDemo v-bind="Hyphens"></JcDemo>
+		<JcDemo v-bind="Content"></JcDemo>
+	</view>
+</template>
+
+
+
+<style>
+</style>

uni_modules/jc-tailwind/components/jc-tailwind/jc-tailwind.vue

@@ -0,0 +1,100 @@
+<script setup>
+	import { onMounted, ref } from "vue"
+	
+	import useColor from '../../hooks/useColor.js'
+	import useVars from '../../hooks/useVars.js'
+	
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+	
+	// const baseColors = ['slate','gray','zinc','neutral','stone','red','orange','amber','yellow','lime','green','emerald','teal','cyan','sky','blue','indigo','violet','purple','fuchsia','pink','rose']
+	const baseColors = ['red','orange','amber','yellow','lime','green','emerald','teal','cyan','sky','blue','indigo','violet','purple','fuchsia','pink','rose']
+	
+	const baseDir = ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
+	
+	function getRandColorName() {
+		const index = ~~(Math.random() * baseColors.length)
+		return baseColors[index]
+	}
+	
+	function getRandDir() {
+		const index = ~~(Math.random() * baseDir.length)
+		return baseDir[index]
+	}
+	
+	function getRandGradientColor() {
+		return `bg-gradient-to-${getRandDir()} from-${getRandColorName()}-500 to-${getRandColorName()}-500 `
+	}
+	
+	const lists = ref([
+		{ bg: '', name: 'Variable', info: '预设变量' },
+		{ bg: '', name: 'Layout', info: '布局' },
+		{ bg: '', name: 'Flexbox & Grid', info: '弹性盒子 & 网格布局' },
+		{ bg: '', name: 'Spacing', info: '间距' },
+		{ bg: '', name: 'Sizing', info: '尺寸' },
+		{ bg: '', name: 'Typography', info: '排版' },
+		{ bg: '', name: 'Backgrounds', info: '背景' },
+		{ bg: '', name: 'Borders', info: '边框' },
+		{ bg: '', name: 'Effects', info: '效果' },
+		{ bg: '', name: 'Filters', info: '滤镜' },
+		{ bg: '', name: 'Transitions & Animation', info: '过渡与动画' },
+		{ bg: '', name: 'Transforms', info: '变换' },
+		{ bg: '', name: 'Interactivity', info: '互动' },
+	])
+	
+	const current = ref('')
+	
+	function change(d) {
+		current.value = d.name
+	}
+	
+	function getRandBg() {
+		lists.value.map((v) => {
+			v.bg = getRandGradientColor()
+			return v
+		})
+	}
+	getRandBg()
+	setInterval(getRandBg, 3000)
+</script>
+
+<template>
+	<view class="bg-white">
+		<template v-if="current">
+			<view class="opacity-70 bg-slate-800 text-slate-100 flex items-center justify-center fixed bottom-5 right-5 w-14 h-14 rounded-full z-20" @tap="change({name: ''})">
+				<text>返回</text>
+			</view>
+			
+			<TwReadme v-if="current == 'Variable'" />
+			<TwLayout v-if="current == 'Layout'" />
+			<TwFlexboxGrid v-if="current == 'Flexbox & Grid'" />
+			<TwSpacing v-if="current == 'Spacing'" />
+			<TwSizing v-if="current == 'Sizing'" />
+			<TwTypography v-if="current == 'Typography'" />
+			<TwBackgrounds v-if="current == 'Backgrounds'" />
+			<TwBorders v-if="current == 'Borders'" />
+			<TwEffects v-if="current == 'Effects'" />
+			<TwFilters v-if="current == 'Filters'" />
+			<TwTransitionsAnimation v-if="current == 'Transitions & Animation'" />
+			<TwTransforms v-if="current == 'Transforms'" />
+			<TwInteractivity v-if="current == 'Interactivity'" />
+		</template>
+		<template v-else>
+			<view class="p-2">
+				<view class="grid grid-cols-2 gap-2">
+					<template v-for="d, i in lists" :key="i">
+						<view class="p-1 border border-slate-100 rounded flex flex-col justify-between" @tap="change(d)" :class="[d.name.length > 20 ? 'col-span-2' : '', d.bg]">
+							<view class="bg-black__25 p-1 rounded">
+								<view class="text-cyan-50 font-bold font-mono text-base flex-1">{{d.name}}</view>
+								<view class="text-violet-200 mt-2 text-right">{{d.info}}</view>
+							</view>
+						</view>
+					</template>
+				</view>
+			</view>
+		</template>
+	</view>
+</template>
+
+<style>
+</style>

uni_modules/jc-tailwind/hooks/useBackgrounds.js

@@ -0,0 +1,155 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+import useColor from './useColor.js'
+
+function useHook() { // 
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+
+
+
+	const BackgroundAttachment = { title: 'Background Attachment', classes: getClasses(`fixed, local, scroll`, { name: 'bg-', value: 'background-attachment', scss: 0 }) }
+	const BackgroundClip = {
+		title: 'Background Clip',
+		classes: getClasses([
+			{ name: 'border', value: 'border-box' },
+			{ name: 'padding', value: 'padding-box' },
+			{ name: 'content', value: 'content-box' },
+			{ name: 'text', value: 'text' },
+		], { name: 'bg-clip-', value: 'background-clip', scss: 0 })
+	}
+
+	const BackgroundColor = {
+		title: 'Background Color',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `bg-${c.name}`,
+				value: [`background: ${c.value};`],
+				bgcolor: c.color,
+				desc: c.rgb,
+			}
+		})
+	}
+
+	const BackgroundOrigin = {
+		title: 'Background Origin',
+		classes: getClasses([{ name: 'border', value: 'border-box' },
+			{ name: 'padding', value: 'padding-box' },
+			{ name: 'content', value: 'content-box' },
+		], { name: 'bg-origin-', value: 'background-origin', scss: 0 })
+	}
+	const BackgroundPosition = {
+		title: 'Background Position',
+		classes: getClasses([
+			{ name: 'bottom', value: 'bottom' },
+			{ name: 'center', value: 'center' },
+			{ name: 'left', value: 'left' },
+			{ name: 'left-bottom', value: 'left bottom' },
+			{ name: 'left-top', value: 'left top' },
+			{ name: 'right', value: 'right' },
+			{ name: 'right-bottom', value: 'right bottom' },
+			{ name: 'right-top', value: 'right top' },
+			{ name: 'top', value: 'top' },
+		], { name: 'bg-', value: 'background-position', scss: 0 })
+	}
+	const BackgroundRepeat = {
+		title: 'Background Repeat',
+		classes: getClasses([
+			{ name: 'repeat', value: 'repeat' },
+			{ name: 'no-repeat', value: 'no-repeat' },
+			{ name: 'repeat-x', value: 'repeat-x' },
+			{ name: 'repeat-y', value: 'repeat-y' },
+			{ name: 'repeat-round', value: 'round' },
+			{ name: 'repeat-space', value: 'space' },
+		], { name: 'bg-', value: 'background-repeat', scss: 0 })
+	}
+	const BackgroundSize = { title: 'Background Size', classes: getClasses(`auto, cover, contain`, { name: 'bg-', value: 'background-size', scss: 0 }) }
+	const BackgroundImage = {
+		title: 'Background Image',
+		classes: getClasses([
+			{ name: 'none', value: 'none' },
+			{ name: 'gradient-to-t', value: 'linear-gradient(to top, var(--gradient-stops))' },
+			{ name: 'gradient-to-tr', value: 'linear-gradient(to top right, var(--gradient-stops))' },
+			{ name: 'gradient-to-r', value: 'linear-gradient(to right, var(--gradient-stops))' },
+			{ name: 'gradient-to-br', value: 'linear-gradient(to bottom right, var(--gradient-stops))' },
+			{ name: 'gradient-to-b', value: 'linear-gradient(to bottom, var(--gradient-stops))' },
+			{ name: 'gradient-to-bl	', value: 'linear-gradient(to bottom left, var(--gradient-stops))' },
+			{ name: 'gradient-to-l', value: 'linear-gradient(to left, var(--gradient-stops))' },
+			{ name: 'gradient-to-tl', value: 'linear-gradient(to top left, var(--gradient-stops))' },
+		], { name: 'bg-', value: 'background-image', scss: 0 })
+	}
+	
+	function getFromColor() {
+		return color.map(c => {
+			const v = c.var ? `var(${c.value})` : c.value
+			return {
+				...c,
+				name: `from-${c.name}`,
+				value: [
+					`--gradient-from-position: 0%;`,
+					`--gradient-from: ${v} var(--gradient-from-position);`,
+					`--gradient-to-position: 100%;`,
+					`--gradient-to: rgba(0,0,0,0) var(--gradient-to-position);`,
+					`--gradient-stops: var(--gradient-from), var(--gradient-to);`,
+				],
+				desc: c.rgb,
+			}
+		})
+	}
+	
+	function getToColor() {
+		return color.map(c => {
+			const v = c.var ? `var(${c.value})` : c.value
+			return {
+				...c,
+				name: `to-${c.name}`,
+				value: [
+					`--gradient-to: ${v} var(--gradient-to-position);`,
+				],
+				desc: c.rgb,
+			}
+		})
+	}
+	
+	function getPercentFromToColor() {
+		let froms = new Array(9).fill(0).map((d, i) => {
+			return {
+				name: `.from-0-${i + 1}`,
+				value: [`--gradient-from-position: calc(${i + 1} * 10 * 1%);`]
+			}
+		})
+		let tos = new Array(9).fill(0).map((d, i) => {
+			return {
+				name: `.to-0-${i + 1}`,
+				value: [`--gradient-to-position: calc(${i + 1} * 10 * 1%);`]
+			}
+		})
+		return [...froms, ...tos]
+	}
+	
+	const GradientColorStops = {
+		title: 'Gradient Color Stops',
+		classes: [
+			...getFromColor(),
+			...getToColor(),
+			...getPercentFromToColor(),
+		]
+	}
+
+	return {
+		BackgroundAttachment,
+		BackgroundClip,
+		BackgroundColor,
+		BackgroundOrigin,
+		BackgroundPosition,
+		BackgroundRepeat,
+		BackgroundSize,
+		BackgroundImage,
+		GradientColorStops
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useBorders.js

@@ -0,0 +1,132 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useBorders
+	const { colors, color } = useColor()
+	const { pxs, percents, border_radius } = useVars()
+
+	const BorderRadius = {
+		title: 'Border Radius',
+		classes: getClasses(border_radius, {
+			name: [
+				'rounded-',
+				'rounded-s-',
+				'rounded-e-',
+				'rounded-t-',
+				'rounded-r-',
+				'rounded-b-',
+				'rounded-l-',
+				'rounded-ss-',
+				'rounded-se-',
+				'rounded-ee-',
+				'rounded-es-',
+				'rounded-tl-',
+				'rounded-tr-',
+				'rounded-br-',
+				'rounded-bl-'
+			],
+			value: [
+				'border-radius',
+				'border-start-start-radius, border-end-start-radius',
+				'border-start-end-radius, border-end-end-radius',
+				'border-top-left-radius, border-top-right-radius',
+				'border-top-right-radius, border-bottom-right-radius',
+				'border-bottom-right-radius, border-bottom-left-radius',
+				'border-top-left-radius, border-bottom-left-radius',
+				'border-start-start-radius',
+				'border-start-end-radius',
+				'border-end-end-radius',
+				'border-end-start-radius',
+				'border-top-left-radius',
+				'border-top-right-radius',
+				'border-bottom-right-radius',
+				'border-bottom-left-radius',
+			],
+		})
+	}
+
+	const BorderWidth = {
+		title: 'Border Width',
+		classes: getClasses(
+			', 0, 2, 3, 4, 8'.split(',').map(d => {
+				d = d.trim()
+				return {
+					name: d,
+					value: d === '' ? '1rpx' : `${d * 2}rpx`
+				}
+			}), {
+				name: [
+					'border-',
+					'border-x-',
+					'border-y-',
+					'border-s-',
+					'border-e-',
+					'border-t-',
+					'border-r-',
+					'border-b-',
+					'border-l-',
+				],
+				value: [
+					'border-width',
+					'border-left-width, border-right-width',
+					'border-top-width, border-bottom-width',
+					'border-inline-start-width',
+					'border-inline-end-width',
+					'border-top-width',
+					'border-right-width',
+					'border-bottom-width',
+					'border-left-width',
+				],
+			}),
+	}
+	const BorderColor = {
+		title: 'Border Color',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `border-${c.name}`,
+				value: [`border-color: ${c.value};`],
+				desc: c.rgb,
+			}
+		})
+	}
+
+	const BorderStyle = {
+		title: 'Border Style',
+		classes: getClasses('solid, dashed, dotted, double, hidden, none', { name: 'border-', value: 'border-style' })
+	}
+
+	const DivideWidth = { title: 'Divide Width', classes: [] }
+	const DivideColor = { title: 'Divide Color', classes: [] }
+	const DivideStyle = { title: 'Divide Style', classes: [] }
+	const OutlineWidth = { title: 'Outline Width', classes: [] }
+	const OutlineColor = { title: 'Outline Color', classes: [] }
+	const OutlineStyle = { title: 'Outline Style', classes: [] }
+	const OutlineOffset = { title: 'Outline Offset', classes: [] }
+	const RingWidth = { title: 'Ring Width', classes: [] }
+	const RingColor = { title: 'Ring Color', classes: [] }
+	const RingOffsetWidth = { title: 'Ring Offset Width', classes: [] }
+	const RingOffsetColor = { title: 'Ring Offset Color', classes: [] }
+
+	return {
+		BorderRadius,
+		BorderWidth,
+		BorderColor,
+		BorderStyle,
+		DivideWidth,
+		DivideColor,
+		DivideStyle,
+		OutlineWidth,
+		OutlineColor,
+		OutlineStyle,
+		OutlineOffset,
+		RingWidth,
+		RingColor,
+		RingOffsetWidth,
+		RingOffsetColor
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useColor.js

@@ -0,0 +1,367 @@
+import { colorToRgba, hexToRgb, hexToRgbAlpha } from '../utils/color.js'
+
+function useHook() {
+	const colors = {
+	  slate: {
+	    '50': '#f8fafc',
+	    '100': '#f1f5f9',
+	    '200': '#e2e8f0',
+	    '300': '#cbd5e1',
+	    '400': '#94a3b8',
+	    '500': '#64748b',
+	    '600': '#475569',
+	    '700': '#334155',
+	    '800': '#1e293b',
+	    '900': '#0f172a',
+	    '950': '#020617'
+	  },
+	  gray: {
+	    '50': '#f9fafb',
+	    '100': '#f3f4f6',
+	    '200': '#e5e7eb',
+	    '300': '#d1d5db',
+	    '400': '#9ca3af',
+	    '500': '#6b7280',
+	    '600': '#4b5563',
+	    '700': '#374151',
+	    '800': '#1f2937',
+	    '900': '#111827',
+	    '950': '#030712'
+	  },
+	  zinc: {
+	    '50': '#fafafa',
+	    '100': '#f4f4f5',
+	    '200': '#e4e4e7',
+	    '300': '#d4d4d8',
+	    '400': '#a1a1aa',
+	    '500': '#71717a',
+	    '600': '#52525b',
+	    '700': '#3f3f46',
+	    '800': '#27272a',
+	    '900': '#18181b',
+	    '950': '#09090b'
+	  },
+	  neutral: {
+	    '50': '#fafafa',
+	    '100': '#f5f5f5',
+	    '200': '#e5e5e5',
+	    '300': '#d4d4d4',
+	    '400': '#a3a3a3',
+	    '500': '#737373',
+	    '600': '#525252',
+	    '700': '#404040',
+	    '800': '#262626',
+	    '900': '#171717',
+	    '950': '#0a0a0a'
+	  },
+	  stone: {
+	    '50': '#fafaf9',
+	    '100': '#f5f5f4',
+	    '200': '#e7e5e4',
+	    '300': '#d6d3d1',
+	    '400': '#a8a29e',
+	    '500': '#78716c',
+	    '600': '#57534e',
+	    '700': '#44403c',
+	    '800': '#292524',
+	    '900': '#1c1917',
+	    '950': '#0c0a09'
+	  },
+	  red: {
+	    '50': '#fef2f2',
+	    '100': '#fee2e2',
+	    '200': '#fecaca',
+	    '300': '#fca5a5',
+	    '400': '#f87171',
+	    '500': '#ef4444',
+	    '600': '#dc2626',
+	    '700': '#b91c1c',
+	    '800': '#991b1b',
+	    '900': '#7f1d1d',
+	    '950': '#450a0a'
+	  },
+	  orange: {
+	    '50': '#fff7ed',
+	    '100': '#ffedd5',
+	    '200': '#fed7aa',
+	    '300': '#fdba74',
+	    '400': '#fb923c',
+	    '500': '#f97316',
+	    '600': '#ea580c',
+	    '700': '#c2410c',
+	    '800': '#9a3412',
+	    '900': '#7c2d12',
+	    '950': '#431407'
+	  },
+	  amber: {
+	    '50': '#fffbeb',
+	    '100': '#fef3c7',
+	    '200': '#fde68a',
+	    '300': '#fcd34d',
+	    '400': '#fbbf24',
+	    '500': '#f59e0b',
+	    '600': '#d97706',
+	    '700': '#b45309',
+	    '800': '#92400e',
+	    '900': '#78350f',
+	    '950': '#451a03'
+	  },
+	  yellow: {
+	    '50': '#fefce8',
+	    '100': '#fef9c3',
+	    '200': '#fef08a',
+	    '300': '#fde047',
+	    '400': '#facc15',
+	    '500': '#eab308',
+	    '600': '#ca8a04',
+	    '700': '#a16207',
+	    '800': '#854d0e',
+	    '900': '#713f12',
+	    '950': '#422006'
+	  },
+	  lime: {
+	    '50': '#f7fee7',
+	    '100': '#ecfccb',
+	    '200': '#d9f99d',
+	    '300': '#bef264',
+	    '400': '#a3e635',
+	    '500': '#84cc16',
+	    '600': '#65a30d',
+	    '700': '#4d7c0f',
+	    '800': '#3f6212',
+	    '900': '#365314',
+	    '950': '#1a2e05'
+	  },
+	  green: {
+	    '50': '#f0fdf4',
+	    '100': '#dcfce7',
+	    '200': '#bbf7d0',
+	    '300': '#86efac',
+	    '400': '#4ade80',
+	    '500': '#22c55e',
+	    '600': '#16a34a',
+	    '700': '#15803d',
+	    '800': '#166534',
+	    '900': '#14532d',
+	    '950': '#052e16'
+	  },
+	  emerald: {
+	    '50': '#ecfdf5',
+	    '100': '#d1fae5',
+	    '200': '#a7f3d0',
+	    '300': '#6ee7b7',
+	    '400': '#34d399',
+	    '500': '#10b981',
+	    '600': '#059669',
+	    '700': '#047857',
+	    '800': '#065f46',
+	    '900': '#064e3b',
+	    '950': '#022c22'
+	  },
+	  teal: {
+	    '50': '#f0fdfa',
+	    '100': '#ccfbf1',
+	    '200': '#99f6e4',
+	    '300': '#5eead4',
+	    '400': '#2dd4bf',
+	    '500': '#14b8a6',
+	    '600': '#0d9488',
+	    '700': '#0f766e',
+	    '800': '#115e59',
+	    '900': '#134e4a',
+	    '950': '#042f2e'
+	  },
+	  cyan: {
+	    '50': '#ecfeff',
+	    '100': '#cffafe',
+	    '200': '#a5f3fc',
+	    '300': '#67e8f9',
+	    '400': '#22d3ee',
+	    '500': '#06b6d4',
+	    '600': '#0891b2',
+	    '700': '#0e7490',
+	    '800': '#155e75',
+	    '900': '#164e63',
+	    '950': '#083344'
+	  },
+	  sky: {
+	    '50': '#f0f9ff',
+	    '100': '#e0f2fe',
+	    '200': '#bae6fd',
+	    '300': '#7dd3fc',
+	    '400': '#38bdf8',
+	    '500': '#0ea5e9',
+	    '600': '#0284c7',
+	    '700': '#0369a1',
+	    '800': '#075985',
+	    '900': '#0c4a6e',
+	    '950': '#082f49'
+	  },
+	  blue: {
+	    '50': '#eff6ff',
+	    '100': '#dbeafe',
+	    '200': '#bfdbfe',
+	    '300': '#93c5fd',
+	    '400': '#60a5fa',
+	    '500': '#3b82f6',
+	    '600': '#2563eb',
+	    '700': '#1d4ed8',
+	    '800': '#1e40af',
+	    '900': '#1e3a8a',
+	    '950': '#172554'
+	  },
+	  indigo: {
+	    '50': '#eef2ff',
+	    '100': '#e0e7ff',
+	    '200': '#c7d2fe',
+	    '300': '#a5b4fc',
+	    '400': '#818cf8',
+	    '500': '#6366f1',
+	    '600': '#4f46e5',
+	    '700': '#4338ca',
+	    '800': '#3730a3',
+	    '900': '#312e81',
+	    '950': '#1e1b4b'
+	  },
+	  violet: {
+	    '50': '#f5f3ff',
+	    '100': '#ede9fe',
+	    '200': '#ddd6fe',
+	    '300': '#c4b5fd',
+	    '400': '#a78bfa',
+	    '500': '#8b5cf6',
+	    '600': '#7c3aed',
+	    '700': '#6d28d9',
+	    '800': '#5b21b6',
+	    '900': '#4c1d95',
+	    '950': '#2e1065'
+	  },
+	  purple: {
+	    '50': '#faf5ff',
+	    '100': '#f3e8ff',
+	    '200': '#e9d5ff',
+	    '300': '#d8b4fe',
+	    '400': '#c084fc',
+	    '500': '#a855f7',
+	    '600': '#9333ea',
+	    '700': '#7e22ce',
+	    '800': '#6b21a8',
+	    '900': '#581c87',
+	    '950': '#3b0764'
+	  },
+	  fuchsia: {
+	    '50': '#fdf4ff',
+	    '100': '#fae8ff',
+	    '200': '#f5d0fe',
+	    '300': '#f0abfc',
+	    '400': '#e879f9',
+	    '500': '#d946ef',
+	    '600': '#c026d3',
+	    '700': '#a21caf',
+	    '800': '#86198f',
+	    '900': '#701a75',
+	    '950': '#4a044e'
+	  },
+	  pink: {
+	    '50': '#fdf2f8',
+	    '100': '#fce7f3',
+	    '200': '#fbcfe8',
+	    '300': '#f9a8d4',
+	    '400': '#f472b6',
+	    '500': '#ec4899',
+	    '600': '#db2777',
+	    '700': '#be185d',
+	    '800': '#9d174d',
+	    '900': '#831843',
+	    '950': '#500724'
+	  },
+	  rose: {
+	    '50': '#fff1f2',
+	    '100': '#ffe4e6',
+	    '200': '#fecdd3',
+	    '300': '#fda4af',
+	    '400': '#fb7185',
+	    '500': '#f43f5e',
+	    '600': '#e11d48',
+	    '700': '#be123c',
+	    '800': '#9f1239',
+	    '900': '#881337',
+	    '950': '#4c0519'
+	  },
+	}
+	
+	function getRgba(color) {
+		return [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9].map(alpha => ({
+			alpha,
+			value: colorToRgba(color, alpha)
+		}))
+	}
+	
+	let _arr = [
+		{name: 'inherit', value: 'inherit', color: 'inherit'},
+		{name: 'current', value: 'currentColor', color: 'currentColor'},
+		{name: 'transparent', value: 'transparent', color: 'transparent'},
+		{name: 'black', value: 'black', color: '#000', rgb: hexToRgb('#000'),rgbAlpha: hexToRgbAlpha('#000'), rgbas: getRgba('#000')},
+		{name: 'white', value: 'white', color: '#fff', rgb: hexToRgb('#fff'),rgbAlpha: hexToRgbAlpha('#fff'), rgbas: getRgba('#fff')},
+	]
+	for(let name in colors) {
+		for(let i in colors[name]) {
+			_arr.push({
+				name: `${name}-${i}`,
+				value: `var(--color-${name}-${i})`,
+				color: colors[name][i],
+				rgb: hexToRgb(colors[name][i]),
+				rgbAlpha: hexToRgbAlpha(colors[name][i]),
+				rgbas: getRgba(colors[name][i]),
+				var: 1,
+			})
+		}
+	}
+	// console.log(11, colors);
+	// $roses: '#fff1f2','#ffe4e6','#fecdd3','#fda4af','#fb7185','#f43f5e','#e11d48','#be123c','#9f1239','#881337','#4c0519';
+	
+	// $colorNames: ('slate': $slates,'gray': $grays,'zinc': $zincs,'neutral': $neutrals,'stone': $stones,'red': $reds,'orange': $oranges,'amber': $ambers,'yellow': $yellows,'lime': $limes,'green': $greens,'emerald': $emeralds,'teal': $teals,'cyan': $cyans,'sky': $skys,'blue': $blues,'indigo': $indigos,'violet': $violets,'purple': $purples,'fuchsia': $fuchsias,'pink': $pinks,'rose': $roses);
+	
+	// $colorIndexes: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;
+	function getScssColors() {
+		let _colors = {}
+		let colorIndexes = []
+		for(let name in colors) {
+			let cArr = []
+			for(let num in colors[name]) {
+				const val = colors[name][num]
+				cArr.push(hexToRgbAlpha(val))
+				if(name == 'red') {
+					colorIndexes.push(num - 0)
+				}
+			}
+			_colors[name] = cArr
+		}
+		
+		return {_colors, colorIndexes}
+	}
+	
+	function getScss() {
+		const {_colors, colorIndexes} = getScssColors()
+		console.log(_colors);
+		console.log(`$indexes: ${colorIndexes.join(',')};`)
+		let colorStr = ``;
+		let names = `$names:(`
+		for(let name in _colors) {
+			let val = _colors[name]
+			colorStr += `$${name}: ${val.map(v => `'${v}'`).join(',')};\n`
+			names += `'${name}': $${name},`
+		}
+		names += `);`
+		
+		console.log(colorStr, names)
+	}
+	
+	// getScss()
+	
+	return {
+		colors, color: _arr
+	}
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useEffects.js

@@ -0,0 +1,57 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useEffects
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+
+	const BoxShadow = {
+		title: 'Box Shadow',
+		classes: getClasses([
+			{ name: 'shadow-sm', value: '0 1rpx 4rpx 0 rgba(0, 0, 0, 0.05)' },
+			{ name: 'shadow', value: '0 1rpx 6rpx 0 rgba(0, 0, 0, 0.1), 0 1rpx 4rpx -1rpx rgba(0, 0, 0, 0.1)' },
+			{ name: 'shadow-md', value: '0 8rpx 6px -1rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -4rpx rgba(0, 0, 0, 0.1)' },
+			{ name: 'shadow-lg', value: '0 10px 15px -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 6px -8rpx rgba(0, 0, 0, 0.1)' },
+			{ name: 'shadow-xl', value: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)' },
+			{ name: 'shadow-2xl', value: '0 25px 50px -24rpx rgba(0, 0, 0, 0.25)' },
+			{ name: 'shadow-inner', value: 'inset 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05)' },
+			{ name: 'shadow-none', value: '0 0 #000' },
+		], { name: '', value: 'box-shadow', scss: 0 })
+	}
+	
+	const BoxShadowColor = {
+		title: 'Box Shadow Color',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `shadow-${c.name}`,
+				value: [`--shadow-color: ${c.value};`],
+				desc: c.rgb,
+			}
+		})
+	}
+
+	const Opacity = {
+		title: 'Opacity',
+		classes: getClasses([0,5,10,20,25,30,40,50,60,70,75,80,90,95,100].map(d => {
+			return {
+				name: d,
+				value: d / 100
+			}
+		}), { name: 'opacity-', value: 'opacity', scss: 0 })
+	}
+	const MixBlendMode = { title: 'Mix Blend Mode', classes: [] }
+	const BackgroundBlendMode = { title: 'Background Blend Mode', classes: [] }
+
+	return {
+		BoxShadow,
+		BoxShadowColor,
+		Opacity,
+		MixBlendMode,
+		BackgroundBlendMode
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useFilters.js

@@ -0,0 +1,94 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useFilters
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+
+	const Blur = {
+		title: 'Blur',
+		classes: getClasses([
+			{ name: 'blur-none', value: 'blur(0)' },
+			{ name: 'blur-sm', value: `blur(${4 * 2}rpx)` },
+			{ name: 'blur', value: `blur(${8 * 2}rpx)` },
+			{ name: 'blur-md', value: `blur(${12 * 2}rpx)` },
+			{ name: 'blur-lg', value: `blur(${16 * 2}rpx)` },
+			{ name: 'blur-xl', value: `blur(${24 * 2}rpx)` },
+			{ name: 'blur-2xl', value: `blur(${40 * 2}rpx)` },
+			{ name: 'blur-3xl', value: `blur(${64 * 2}rpx)` },
+		], { name: '', value: 'filter', scss: 0 })
+	}
+	const Brightness = { title: 'Brightness', classes: [] }
+	const Contrast = { title: 'Contrast', classes: [] }
+	const DropShadow = {
+		title: 'Drop Shadow',
+		classes: getClasses([
+			{ name: 'drop-shadow-sm', value: 'drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.05))' },
+			{ name: 'drop-shadow', value: 'drop-shadow(0 1rpx 4rpx rgba(0, 0, 0, 0.1)) drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.06))' },
+			{ name: 'drop-shadow-md', value: 'drop-shadow(0 8rpx 6rpx rgba(0, 0, 0, 0.07)) drop-shadow(0 4rpx 4rpx rgba(0, 0, 0, 0.06))' },
+			{ name: 'drop-shadow-lg', value: 'drop-shadow(0 20rpx 16rpx rgba(0, 0, 0, 0.04)) drop-shadow(0 8rpx 6rpx rgba(0, 0, 0, 0.1))' },
+			{ name: 'drop-shadow-xl', value: 'drop-shadow(0 40rpx 26rpx rgba(0, 0, 0, 0.03)) drop-shadow(0 16rpx 10rpx rgba(0, 0, 0, 0.08))' },
+			{ name: 'drop-shadow-2xl', value: 'drop-shadow(0 50rpx 50rpx rgba(0, 0, 0, 0.15))' },
+			{ name: 'drop-shadow-none', value: 'drop-shadow(0 0 rgba(0,0,0,0))' },
+		], { name: '', value: 'filter', scss: 0 })
+	}
+	const Grayscale = { title: 'Grayscale', classes: [] }
+	const HueRotate = { title: 'Hue Rotate', classes: [] }
+	const Invert = { title: 'Invert', classes: [] }
+	const Saturate = { title: 'Saturate', classes: [] }
+	const Sepia = { title: 'Sepia', classes: [] }
+	const BackdropBlur = {
+		title: 'Backdrop Blur',
+		classes: getClasses([
+			{ name: 'none', value: `blur(0)` },
+			{ name: 'sm', value: `blur(${4 * 2}rpx)` },
+			{ name: '', value: `blur(${8 * 2}rpx)` },
+			{ name: 'md', value: `blur(${12 * 2}rpx)` },
+			{ name: 'lg', value: `blur(${16 * 2}rpx)` },
+			{ name: 'xl', value: `blur(${24 * 2}rpx)` },
+			{ name: '2xl', value: `blur(${40 * 2}rpx)` },
+			{ name: '3xl', value: `blur(${64 * 2}rpx)` },
+		], { name: 'backdrop-blur-', value: 'backdrop-filter', scss: 0 })
+	}
+	const BackdropBrightness = { title: 'Backdrop Brightness', classes: [] }
+	const BackdropContrast = { title: 'Backdrop Contrast', classes: [] }
+	const BackdropGrayscale = { title: 'Backdrop Grayscale', classes: [] }
+	const BackdropHueRotate = { title: 'Backdrop Hue Rotate', classes: [] }
+	const BackdropInvert = { title: 'Backdrop Invert', classes: [] }
+	const BackdropOpacity = {
+		title: 'Backdrop Opacity',
+		classes: getClasses([0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100].map(d => {
+			return {
+				name: d,
+				value: `opacity(${d / 100})`
+			}
+		}), { name: 'backdrop-opacity-', value: 'backdrop-filter', scss: 0 })
+	}
+	const BackdropSaturate = { title: 'Backdrop Saturate', classes: [] }
+	const BackdropSepia = { title: 'Backdrop Sepia', classes: [] }
+
+	return {
+		Blur,
+		Brightness,
+		Contrast,
+		DropShadow,
+		Grayscale,
+		HueRotate,
+		Invert,
+		Saturate,
+		Sepia,
+		BackdropBlur,
+		BackdropBrightness,
+		BackdropContrast,
+		BackdropGrayscale,
+		BackdropHueRotate,
+		BackdropInvert,
+		BackdropOpacity,
+		BackdropSaturate,
+		BackdropSepia
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useFlexboxGrid.js

@@ -0,0 +1,196 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+function getGridTemplateRepeats(max = 12) {
+	const arr = new Array(max).fill('').map((d, i) => {
+		let index = i + 1
+		return {
+			name: index,
+			value: `repeat(${index}, minmax(0, 1fr))`
+		}
+	})
+	return arr
+}
+
+function getGridColumnStartEnd(name = 'col', vname = 'column', max = 12) {
+	let arr = [{ name: `${name}-auto`, value: [`grid-${vname}: auto;`] }]
+	for (let i = 1; i <= max; i++) {
+		if (i <= max) {
+			arr.push({ name: `${name}-span-${i}`, value: [`grid-${vname}: span ${i} / span ${i};`] })
+		}
+		arr.push({ name: `${name}-start-${i}`, value: [`grid-${vname}-start: ${i};`] })
+		arr.push({ name: `${name}-end-${i}`, value: [`grid-${vname}-end: ${i};`] })
+	}
+	arr.push({ name: `${name}-span-full`, value: [`grid-${vname}: 1 / -1;`] })
+	arr.push({ name: `${name}-start-auto`, value: [`grid-${vname}-start: auto;`] })
+	arr.push({ name: `${name}-end-auto`, value: [`grid-${vname}-end: auto;`] })
+	return arr
+}
+
+
+function useHook() { // useFlexboxGrid
+	const { pxs, percents } = useVars()
+
+	const FlexBasis = {
+		title: 'Flex Basis',
+		classes: [...getClasses(pxs, {
+			name: ['basis-'],
+			value: ['flex-basis'],
+		}), ...getClasses(percents, {
+			name: ['basis-'],
+			value: ['flex-basis'],
+		})]
+	}
+	const FlexDirection = {
+		title: 'Flex Direction',
+		classes: getClasses('row, row-reverse, col, col-reverse', { name: 'flex-', value: 'flex-direction' }),
+	}
+
+	const FlexWrap = {
+		title: 'Flex Wrap',
+		classes: getClasses('wrap, wrap-reverse, nowrap', { name: 'flex-', value: 'flex-wrap' }),
+	}
+
+	const Flex = {
+		title: 'Flex',
+		classes: getClasses('1: 1 1 0%, auto: 1 1 0%, initial: 0 1 auto, none', { name: 'flex-', value: 'flex' }),
+	}
+
+	const FlexGrow = {
+		title: 'Flex Grow',
+		classes: getClasses(':1, 0', { name: 'grow-', value: 'grow' }),
+	}
+
+	const FlexShrink = {
+		title: 'Flex Shrink',
+		classes: getClasses(':1, 0', { name: 'shrink-', value: 'shrink' }),
+	}
+
+	const Order = {
+		title: 'Order',
+		classes: getClasses('1,2,3,4,5,6,7,8,9,10,11,12,first: -9999,last: 9999,none: 0', { name: 'order-', value: 'order' }),
+	}
+
+	const GridTemplateColumns = {
+		title: 'Grid Template Columns',
+		classes: getClasses([...getGridTemplateRepeats(12), { name: 'none' }], { name: 'grid-cols-', value: 'grid-template-columns' }),
+	}
+
+	const GridColumnStartEnd = {
+		title: 'Grid Column Start End',
+		classes: getGridColumnStartEnd(),
+	}
+
+	const GridTemplateRows = {
+		title: 'Grid Template Rows',
+		classes: getClasses([...getGridTemplateRepeats(6), { name: 'none' }], { name: 'grid-rows-', value: 'grid-template-rows' }),
+	}
+
+	const GridRowStartEnd = {
+		title: 'Grid Row Start End',
+		classes: getGridColumnStartEnd('row', 'row', 6),
+	}
+
+	const GridAutoFlow = {
+		title: 'Grid Auto Flow',
+		classes: getClasses('row, col, dense, row-dense, col-dense', { name: 'grid-flow-', value: 'grid-auto-flow' }),
+	}
+
+	const GridAutoColumns = {
+		title: 'Grid Auto Columns',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: 'min', value: 'min-content' },
+			{ name: 'max', value: 'max-content' },
+			{ name: 'fr', value: 'minmax(0, 1fr)' },
+		], { name: 'auto-cols-', value: 'grid-auto-columns' }),
+	}
+
+	const GridAutoRows = {
+		title: 'Grid Auto Rows',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: 'min', value: 'min-content' },
+			{ name: 'max', value: 'max-content' },
+			{ name: 'fr', value: 'minmax(0, 1fr)' },
+		], { name: 'auto-rows-', value: 'grid-auto-rows' }),
+	}
+
+	const Gap = {
+		title: 'Gap',
+		classes: getClasses(pxs, { name: ['gap-', 'gap-x-', 'gap-y-'], value: ['gap', 'column-gap', 'row-gap'] }),
+	}
+
+	const JustifyContent = {
+		title: 'Justify Content',
+		classes: getClasses('normal, start: flex-start, end: flex-end, center, between: space-between, around: space-around, evenly: space-evenly, stretch', { name: 'justify-', value: 'justify-content' }),
+	}
+
+	const JustifyItems = {
+		title: 'Justify Items',
+		classes: getClasses('start, end, center, stretch', { name: 'justify-items-', value: 'justify-items' }),
+	}
+
+	const JustifySelf = {
+		title: 'Justify Self',
+		classes: getClasses('auto, start, end, center, stretch', { name: 'justify-self-', value: 'justify-self' }),
+	}
+
+	const AlignContent = {
+		title: 'Align Content',
+		classes: getClasses('normal, center, start: flex-start, end: flex-end, between: space-between, around: space-around, evenly: space-evenly, baseline, stretch', { name: 'content-', value: 'align-content' }),
+	}
+
+	const AlignItems = {
+		title: 'Align Items',
+		classes: getClasses('start: flex-start, end, center, baseline, stretch', { name: 'items-', value: 'align-items' }),
+	}
+
+	const AlignSelf = {
+		title: 'Align Self',
+		classes: getClasses('auto, start: flex-start, end: flex-end, center, stretch, baseline', { name: 'self-', value: 'align-self' }),
+	}
+	const PlaceContent = {
+		title: 'Place Content',
+		classes: getClasses('center, start, end, between: space-between, around: space-around, evenly: space-evenly, baseline, stretch', { name: 'place-content-', value: 'place-content' }),
+	}
+	const PlaceItems = {
+		title: 'Place Items',
+		classes: getClasses('start, end, center, baseline, stretch', { name: 'place-items-', value: 'place-items' }),
+	}
+	const PlaceSelf = {
+		title: 'Place Self',
+		classes: getClasses('auto, start, end, center, stretch', { name: 'place-self-', value: 'place-self' }),
+	}
+
+
+	return {
+		FlexBasis,
+		FlexDirection,
+		FlexWrap,
+		Flex,
+		FlexGrow,
+		FlexShrink,
+		Order,
+		GridTemplateColumns,
+		GridColumnStartEnd,
+		GridTemplateRows,
+		GridRowStartEnd,
+		GridAutoFlow,
+		GridAutoColumns,
+		GridAutoRows,
+		Gap,
+		JustifyContent,
+		JustifyItems,
+		JustifySelf,
+		AlignContent,
+		AlignItems,
+		AlignSelf,
+		PlaceContent,
+		PlaceItems,
+		PlaceSelf
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useInteractivity.js

@@ -0,0 +1,31 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useInteractivity
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+	
+	const AccentColor = { title: 'Accent Color', classes: [] }
+	const Appearance = { title: 'Appearance', classes: getClasses('none', {name: 'appearance-', value: 'appearance', scss: 0}) }
+	const Cursor = { title: 'Cursor', classes: [] }
+	const CaretColor = { title: 'Caret Color', classes: [] }
+	const PointerEvents = { title: 'Pointer Events', classes: getClasses('none, auto', {name: 'pointer-events-', value: 'pointer-events', scss: 0}) }
+	const Resize = { title: 'Resize', classes: [] }
+	const ScrollBehavior = { title: 'Scroll Behavior', classes: getClasses('auto, smooth', {name: 'scroll-', value: 'scroll-behavior', scss: 0}) }
+	const ScrollMargin = { title: 'Scroll Margin', classes: [] }
+	const ScrollPadding = { title: 'Scroll Padding', classes: [] }
+	const ScrollSnapAlign = { title: 'Scroll Snap Align', classes: [] }
+	const ScrollSnapStop = { title: 'Scroll Snap Stop', classes: [] }
+	const ScrollSnapType = { title: 'Scroll Snap Type', classes: [] }
+	const TouchAction = { title: 'Touch Action', classes: [] }
+	const UserSelect = { title: 'User Select', classes: getClasses('none, text, all, auto', {name: 'select-', value: 'user-select', scss: 0}) }
+	const WillChange = { title: 'Will Change', classes: getClasses('auto, scroll: scroll-position,contents,transform', {name: 'will-change-', value: 'will-change', scss: 0}) }
+
+	return {
+		AccentColor, Appearance, Cursor, CaretColor, PointerEvents, Resize, ScrollBehavior, ScrollMargin, ScrollPadding, ScrollSnapAlign, ScrollSnapStop, ScrollSnapType, TouchAction, UserSelect, WillChange
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useLayout.js

@@ -0,0 +1,148 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+function useHook() { // useLayout
+	const { pxs, percents } = useVars()
+
+	const AspectRatio = {
+		title: 'Aspect Ratio',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: 'square', value: '1 / 1' },
+			{ name: 'video', value: '16 / 9' },
+		], {
+			name: 'aspect-',
+			value: 'aspect-ratio'
+		})
+	}
+
+	const BoxSizing = ({
+		title: 'Box Sizing',
+		classes: getClasses([
+			{ name: 'border', value: 'border-box' },
+			{ name: 'content', value: 'content-box' },
+		], {
+			name: 'box-',
+			value: 'box-sizing'
+		})
+	})
+
+	const Display = {
+		title: 'Display',
+		classes: getClasses('block, inline-block, inline, flex, inline-flex, flow-root, grid, inline-grid, contents, list-item, hidden: none', {
+			name: '',
+			value: 'display',
+			scss: 0
+		})
+	}
+
+	const Floats = {
+		title: 'Floats',
+		classes: getClasses('left, right, none', {
+			name: 'float-',
+			value: 'float',
+		})
+	}
+
+	const Clear = {
+		title: 'Clear',
+		classes: getClasses('left, right, both, none', {
+			name: 'clear-',
+			value: 'clear',
+		})
+	}
+
+	const Isolation = {
+		title: 'Isolation',
+		classes: getClasses('isolate ,isolation-auto', {
+			name: '',
+			value: 'isolation',
+		})
+	}
+
+	const ObjectFit = {
+		title: 'Object Fit',
+		classes: getClasses('contain, cover, fill, none, scale-down', {
+			name: 'object-',
+			value: 'object-fit',
+		})
+	}
+
+	const ObjectPosition = {
+		title: 'Object Position',
+		classes: getClasses('bottom, center, left, left-bottom, left-top, right, right-bottom, right-top, top', {
+			name: 'object-',
+			value: 'object-position',
+		})
+	}
+
+	const Overflow = {
+		title: 'Overflow',
+		classes: getClasses('auto, hidden, clip, visible, scroll', {
+			name: ['overflow-', 'overflow-x-', 'overflow-y-'],
+			value: ['overflow', 'overflow-x', 'overflow-y'],
+		})
+	}
+
+	const OverscrollBehavior = {
+		title: 'Overscroll Behavior',
+		classes: getClasses('auto, contain, none', {
+			name: ['overscroll-', 'overscroll-x-', 'overscroll-y-'],
+			value: ['overscroll-behavior', 'overscroll-behavior-x', 'overscroll-behavior-y'],
+		})
+	}
+
+	const Position = {
+		title: 'Position',
+		classes: getClasses('static, fixed, absolute, relative, sticky', {
+			name: '',
+			value: 'position',
+		})
+	}
+
+	const TopRightBottomLeft = {
+		title: 'Top / Right / Bottom / Left',
+		classes: getClasses(pxs, {
+			name: ['inset-', 'inset-x-', 'inset-y-', 'start-', 'end-', 'top-', 'right-', 'bottom-', 'left-'],
+			value: ['inset', 'left, right', 'top, bottom', 'inset-inline-start', 'inset-inline-end', 'top', 'right', 'bottom', 'left'],
+		})
+	}
+
+	const Visibility = {
+		title: 'Visibility',
+		classes: getClasses('visible, invisible, collapse', {
+			name: '',
+			value: 'visibility',
+		})
+	}
+
+	const ZIndex = {
+		title: 'Z-Index',
+		classes: getClasses('0, 10, 20, 30, 40, 50, auto', {
+			name: 'z-',
+			value: 'z-index',
+		})
+	}
+
+
+
+	return {
+		AspectRatio,
+		BoxSizing,
+		Display,
+		Floats,
+		Clear,
+		Isolation,
+		ObjectFit,
+		ObjectPosition,
+		Overflow,
+		OverscrollBehavior,
+		Position,
+		TopRightBottomLeft,
+		Visibility,
+		ZIndex
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useSizes.js

@@ -0,0 +1,94 @@
+function getPxs() {
+	const _Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
+	let Pxs = [{ name: 'px', px: 1 }]
+	_Sizes.map(d => {
+		let d5 = d * 5,
+			d10 = d * 10
+		if (d5 > 0 && d5 <= 40 && d5 % 5 == 0 && d5 % 10 != 0) {
+			Pxs.push({ name: d5, px: d * 2 })
+		}
+		Pxs.push({ name: d10, px: d * 4 })
+	})
+	Pxs = Pxs.sort((n1, n2) => n1.px - n2.px).map(d => {
+		d.name10 = d.name
+		if (d.name != 'px') {
+			let _name = d.name / 10
+			if (_name % 1 == 0) {
+				d.name = _name
+			} else {
+				d.name = `${_name}`.replace(/\./g, '-')
+			}
+			d._name = _name
+		}
+		return d
+	})
+	let sass = '',
+		sassName = ''
+	Pxs.map(d => {
+		sass += `,'${d.name}' ${d.px} `
+		sassName += `,'${d.name}' `
+	})
+	sass = sass.substring(1)
+	sassName = sassName.substring(1)
+
+	return { Pxs, pxsass: sass, pxSassName: sassName }
+}
+
+function getPercents() {
+	const pct = [2, 3, 4, 5, 6, 12]
+
+	let pcts = []
+	pct.map((d) => {
+		for (let it = 1; it < d; it++) {
+			if (it != d) {
+				pcts.push({
+					name: `${it}_${d}`,
+					val: (it / d * 100) % 1 == 0 ? it / d * 100 : it / d * 100,
+				})
+			}
+		}
+	})
+	pcts.push(...[
+		{ name: 'auto', val: 'auto' },
+		{ name: 'full', val: '100%' },
+		// {name: 'w-screen', val: '100vw'},
+		// {name: 'h-screen', val: '100vh'},
+	])
+
+	let sassNames = ''
+	pcts.map(d => {
+		sassNames += `,'${d.name}' `
+	})
+	sassNames = sassNames.substring(1)
+
+	return { Pcts: pcts, pctSassName: sassNames }
+}
+
+function useHook() { // useSizes
+	const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
+	const Percents = [2, 3, 4, 5, 6, 12, 'full', 'auto']
+	const Xls = ['3xs 10 12', '2xs 11 14', 'xs 12 16', 'mini 13 18', 'sm 14 20', 'md 15 22', 'base 16 24', 'lg 18 28', 'xl 20 28', '2xl 24 32', '3xl 30 36', '4xl 36 40', '5xl 48 0', '6xl 60 0', '7xl 72 0', '8xl 96 0', '9xl 128 0'].map(d => {
+
+		let [name, fontSize, lineHeight] = d.split(' ')
+		return {
+			name,
+			fontSize,
+			lineHeight
+		}
+	})
+
+	const { Pxs, pxsass, pxSassName } = getPxs()
+
+	const { Pcts, pctSassName } = getPercents()
+	// console.log(Pcts)
+	return {
+		Sizes: Pxs,
+		Percents: Pcts,
+		Xls,
+		Pxs,
+		Pcts,
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useSizing.js

@@ -0,0 +1,62 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+function useHook() { // useTypography
+	const { pxs, percents } = useVars()
+
+	const Width = {
+		title: 'Width',
+		classes: [
+			...getClasses(pxs, {
+				name: ['w-'],
+				value: ['width'],
+			}),
+			...getClasses(percents, {
+				name: ['w-'],
+				value: ['width'],
+			}),
+			{name: 'w-screen', value: ['width: var(--w-screen)'], percent: '100vw'}
+		]
+	}
+
+
+
+	const Height = {
+		title: 'Height',
+		classes: [
+			...getClasses(pxs, {
+				name: ['h-'],
+				value: ['height'],
+			}),
+			...getClasses(percents, {
+				name: ['h-'],
+				value: ['height'],
+			}),
+			{name: 'h-screen', value: ['height: var(--h-screen)'], percent: '100vh'}
+		]
+	}
+	
+	const MaxHeight = {
+		title: 'Max Height',
+		classes: [
+			...getClasses(pxs, {
+				name: ['max-h-'],
+				value: ['max-height'],
+			}),
+			...getClasses(percents, {
+				name: ['max-h-'],
+				value: ['max-height'],
+			}),
+			{name: 'max-h-screen', value: ['max-height: var(--h-screen)'], percent: '100vh'}
+		]
+	} 
+
+	return {
+		Width,
+		Height,
+		MaxHeight
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useSpacing.js

@@ -0,0 +1,53 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+function useHook() { // useTypography
+	const { pxs, percents } = useVars()
+
+	const Padding = {
+		title: 'Padding',
+		classes: getClasses(pxs, {
+			// name: ['p-', 'px-', 'py-', 'ps-', 'pe-', 'pt-', 'pr-', 'pb-', 'pl-'],
+			// value: ['padding', 'padding-left, padding-right', 'padding-top, padding-bottom', 'padding-inline-start', 'padding-inline-end', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
+			name: ['p-', 'px-', 'py-', 'pt-', 'pr-', 'pb-', 'pl-'],
+			value: ['padding', 'padding-left, padding-right', 'padding-top, padding-bottom', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
+		})
+	}
+
+	const Margin = {
+		title: 'Margin',
+		classes: [
+			...getClasses(pxs, {
+				// name: ['m-', 'mx-', 'my-', 'ms-', 'me-', 'mt-', 'mr-', 'mb-', 'ml-'],
+				// value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-inline-start', 'margin-inline-end', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+				name: ['m-', 'mx-', 'my-', 'mt-', 'mr-', 'mb-', 'ml-'],
+				value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+			}),
+			...getClasses([{name: 'auto', value: 'auto'}], {
+				name: ['m-', 'mx-', 'my-', 'mt-', 'mr-', 'mb-', 'ml-'],
+				value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+			})
+		]
+	}
+
+	const SpaceBetween = {
+		title: 'Space Between',
+		classes: [
+			...getClasses(pxs, {
+				name: ['space-x-', 'space-y-'],
+				value: ['margin-left', 'margin-top'],
+			}),
+			{name: 'space-x-reverse', value: ['--space-x-reverse: 1']},
+			{name: 'space-y-reverse', value: ['--space-y-reverse: 1']},
+		]
+	}
+
+	return {
+		Padding,
+		Margin,
+		SpaceBetween
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useTransforms.js

@@ -0,0 +1,82 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+
+function useHook() { // useTypography
+	const { pxs, percents } = useVars()
+
+	const Scale = {
+		title: 'Scale',
+		classes: getClasses('0, 50, 75, 90, 95, 100, 105, 110, 125, 150', {
+			name: ['scale-', 'scale-x-', 'scale-y-'],
+			value: [
+				d => [`transform: scale(${d.value / 100})`],
+				d => [`transform: scaleX(${d.value / 100})`],
+				d => [`transform: scaleY(${d.value / 100})`]
+			],
+		})
+	}
+
+
+	const Rotate = {
+		title: 'Rotate',
+		classes: getClasses('0, 1, 2, 3, 6, 12, 45, 90, 180', {
+			name: ['rotate-', '-rotate-'],
+			value: [
+				d => [`transform: rotate(${d.value}deg)`],
+				d => [`transform: rotate(${-d.value}deg)`]
+			],
+		})
+	}
+
+	const Translate = {
+		title: 'Translate',
+		classes: [
+			...getClasses(pxs, {
+				name: ['translate-x-', 'translate-y-'],
+				value: [
+					d => [`transform: translateX(${d.value})`],
+					d => [`transform: translateY(${d.value})`],
+				],
+			}),
+			...getClasses(percents, {
+				name: ['translate-x-', 'translate-y-'],
+				value: [
+					d => [`transform: translateX(${d.value})`],
+					d => [`transform: translateY(${d.value})`],
+				],
+			})
+		]
+	}
+
+	const Skew = {
+		title: 'Skew',
+		classes: getClasses('0, 1, 2, 3, 6, 12', {
+			name: ['skew-x-', 'skew-y-'],
+			value: [
+				d => [`transform: skewX(${d.value}deg)`],
+				d => [`transform: skewy(${-d.value}deg)`]
+			],
+		})
+	}
+
+
+	const TransformOrigin = {
+		title: 'Transform Origin',
+		classes: getClasses('center, top, top-right: top right, right, bottom-right: bottom right, bottom, bottom-left: bottom left, left, top-left: top left', {
+			name: ['origin-'],
+			value: ['transform-origin'],
+		})
+	}
+
+	return {
+		Scale,
+		Rotate,
+		Translate,
+		Skew,
+		TransformOrigin
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useTransitionsAnimation.js

@@ -0,0 +1,69 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useTransitionsAnimation
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+
+	const TransitionProperty = {
+		title: 'Transition Property',
+		classes: getClasses([
+			{ name: 'none', value: 'none' },
+			{ name: 'all', value: 'all' },
+			{ name: '', value: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter' },
+			{ name: 'colors', value: 'color, background-color, border-color, text-decoration-color, fill, stroke' },
+			{name: 'opacity', value: 'opacity'},
+			{name: 'shadow', value: 'box-shadow'},
+			{name: 'transform', value: 'transform'},
+		], { name: 'transition-', value: ({name, value}) => {
+			if(name == 'none') {
+				return [ `transition-property: ${name};` ]
+			}
+			const custom = [
+				'transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);',
+				'transition-duration: 150ms;'
+			]
+			return [ `transition-property: ${value};`, ...custom ]
+		}, scss: 0 })
+	}
+	const TransitionDuration = {
+		title: 'Transition Duration',
+		classes: getClasses([0, 75, 100, 150, 200, 300, 500, 700, 1000].map(d => {
+			return {
+				name: d,
+				value: `${d}${d > 0 ? 'ms' : 's'}`
+			}
+		}), { name: 'duration-', value: 'transition-duration', scss: 0 })
+	}
+	const TransitionTimingFunction = {
+		title: 'Transition Timing Function',
+		classes: getClasses([
+			{ name: 'linear', value: 'linear' },
+			{ name: 'in', value: 'cubic-bezier(0.4, 0, 1, 1)' },
+			{ name: 'out', value: 'cubic-bezier(0, 0, 0.2, 1)' },
+			{ name: 'in-out', value: 'cubic-bezier(0.4, 0, 0.2, 1)' },
+		], { name: 'ease-', value: 'transition-timing-function', scss: 0 })
+	}
+	const TransitionDelay = {
+		title: 'Transition Delay',
+		classes: getClasses([0, 75, 100, 150, 200, 300, 500, 700, 1000].map(d => {
+			return {
+				name: d,
+				value: `${d}${d > 0 ? 'ms' : 's'}`
+			}
+		}), { name: 'delay-', value: 'transition-delay', scss: 0 })
+	}
+	const Animation = { title: 'Animation', classes: [] }
+
+	return {
+		TransitionProperty,
+		TransitionDuration,
+		TransitionTimingFunction,
+		TransitionDelay,
+		Animation
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useTypography.js

@@ -0,0 +1,281 @@
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useTypography
+	const { colors, color } = useColor()
+	const { pxs, percents, xls } = useVars()
+
+	const FontFamily = {
+		title: 'Font Family',
+		classes: getClasses('sans, serif, mono', {
+			name: ['font-'],
+			value: [d => {
+				const fs = {
+					sans: `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
+					serif: `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`,
+					mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
+				}
+				return [`font-family: ${fs[d.value]};`]
+			}]
+		})
+	}
+
+	const FontSize = ({
+		title: 'Font Size',
+		classes: getClasses(xls, {
+			name: 'text-',
+			value: d => {
+				return [{ value: `font-size: ${d.value};`, rpx: d.fontSize * 2 }, { value: `line-height: ${d.lineHeightValue};`, desc: d.lineHeight > 0 ? `${d.lineHeight * 2}rpx` : 1 }]
+			}
+		}),
+	})
+	const FontSmoothing = { title: 'Font Smoothing', classes: [] }
+
+	const FontStyle = {
+		title: 'Font Style',
+		classes: getClasses([
+			{ name: 'italic', value: 'italic' },
+			{ name: 'not-italic', value: 'normal' },
+		], { name: '', value: 'font-style' })
+	}
+
+	const FontWeight = ({
+		title: 'Font Weight',
+		classes: getClasses('thin,extralight,light,normal,medium,semibold,bold,extrabold,black', {
+			name: 'font-',
+			value: (d, i) => {
+				return [`font-weight: ${(i + 1) * 100};`]
+			}
+		}),
+	})
+
+	const FontVariantNumeric = {
+		title: 'Font Variant Numeric',
+		classes: getClasses([
+			{ name: 'normal-nums', value: 'normal' },
+			{ name: 'ordinal', value: 'ordinal' },
+			{ name: 'slashed-zero', value: 'slashed-zero' },
+			{ name: 'lining-nums', value: 'lining-nums' },
+			{ name: 'oldstyle-nums', value: 'oldstyle-nums' },
+			{ name: 'proportional-nums', value: 'proportional-nums' },
+			{ name: 'tabular-nums', value: 'tabular-nums' },
+			{ name: 'diagonal-fractions', value: 'diagonal-fractions' },
+			{ name: 'stacked-fractions', value: 'stacked-fractions' },
+		], { name: '', value: 'font-variant-numeric' })
+	}
+	// 1em = 16px .1em = 16 * 0.1 = 1.6px = 3.2rpx
+	const LetterSpacing = {
+		title: 'Letter Spacing',
+		classes: getClasses([
+			{ name: 'tighter', value: '-0.05em', rpx: -16 * 2 * .05 },
+			{ name: 'tight', value: '-0.025em', rpx: -16 * 2 * .025 },
+			{ name: 'normal', value: '0em', rpx: 0 },
+			{ name: 'wide', value: '0.025em', rpx: 16 * 2 * .025 },
+			{ name: 'wider', value: '0.05em', rpx: 16 * 2 * .05 },
+			{ name: 'widest', value: '0.1em', rpx: 16 * 2 * .1 },
+		], { name: 'tracking-', value: 'letter-spacing' })
+	}
+	const LineClamp = {
+		title: 'Line Clamp',
+		classes: [
+			...new Array(6).fill(0).map((d, i) => {
+				return {
+					name: `line-clamp-${i + 1}`,
+					value: [
+						'overflow: hidden;',
+						'display: -webkit-box;',
+						'-webkit-box-orient: vertical;',
+						`-webkit-line-clamp: ${i + 1};`
+					]
+				}
+			}),
+			{
+				name: 'line-clamp-none',
+				value: [
+					'overflow: visible;',
+					'display: block;',
+					'-webkit-box-orient: horizontal;',
+					'-webkit-line-clamp: none;'
+				]
+			}
+		]
+	}
+
+	const LineHeight = {
+		title: 'Line Height',
+		classes: getClasses([
+			{ name: '3', value: '.75rem', rpx: 16 * 2 * .75 },
+			{ name: '4', value: '1rem', rpx: 16 * 2 * 1 },
+			{ name: '5', value: '1.25rem', rpx: 16 * 2 * 1.25 },
+			{ name: '6', value: '1.5rem', rpx: 16 * 2 * 1.5 },
+			{ name: '7', value: '1.75rem', rpx: 16 * 2 * 1.75 },
+			{ name: '8', value: '2rem', rpx: 16 * 2 * 2 },
+			{ name: '9', value: '2.25rem', rpx: 16 * 2 * 2.25 },
+			{ name: '10', value: '2.5rem', rpx: 16 * 2 * 2.5 },
+			{ name: 'none', value: '1' },
+			{ name: 'tight', value: '1.25' },
+			{ name: 'snug', value: '1.375' },
+			{ name: 'normal', value: '1.5' },
+			{ name: 'relaxed', value: '1.625' },
+			{ name: 'loose', value: '2' },
+		], { name: 'leading-', value: 'line-height' })
+	}
+	const ListStyleImage = { title: 'List StyleImage', classes: [] }
+	const ListStylePosition = { title: 'List StylePosition', classes: [] }
+	const ListStyleType = { title: 'List StyleType', classes: [] }
+
+	const TextAlign = ({
+		title: 'Text Align',
+		classes: getClasses('left,center,right,justify,start,end', { name: 'text-', value: 'text-align' }),
+	})
+	const TextColor = {
+		title: 'Text Color',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `text-${c.name}`,
+				value: [`color: ${c.value};`],
+				textcolor: c.color,
+				desc: c.rgb,
+			}
+		})
+	}
+
+	const TextDecoration = {
+		title: 'Text Decoration',
+		classes: getClasses([
+			{ name: 'underline', value: 'underline' },
+			{ name: 'overline', value: 'overline' },
+			{ name: 'line-through', value: 'line-through' },
+			{ name: 'no-underline', value: 'none' },
+		], { name: '', value: 'text-decoration-line' })
+	}
+	const TextDecorationColor = {
+		title: 'Text DecorationColor',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `decoration-${c.name}`,
+				value: [`color: ${c.value};`],
+				// textcolor: c.color,
+				desc: c.rgb,
+			}
+		})
+	}
+	const TextDecorationStyle = {
+		title: 'Text DecorationStyle',
+		classes: getClasses('solid, double, dotted, dashed, wavy', { name: 'decoration-', value: 'text-decoration-style' })
+	}
+	const TextDecorationThickness = {
+		title: 'Text Decoration Thickness',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: 'from-font', value: 'from-font' },
+			{ name: '0', value: '0' },
+			{ name: '1', value: `${1 * 2}rpx` },
+			{ name: '2', value: `${2 * 2}rpx` },
+			{ name: '4', value: `${4 * 2}rpx` },
+			{ name: '8', value: `${8 * 2}rpx` },
+		], { name: 'decoration-', value: 'text-decoration-thickness', scss: 0 })
+	}
+	const TextUnderlineOffset = {
+		title: 'Text Underline Offset',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: '0', value: '0' },
+			{ name: '1', value: `${1 * 2}rpx` },
+			{ name: '2', value: `${2 * 2}rpx` },
+			{ name: '4', value: `${4 * 2}rpx` },
+			{ name: '8', value: `${8 * 2}rpx` },
+		], { name: 'underline-offset-', value: 'text-underline-offset', scss: 0 })
+	}
+	const TextTransform = {
+		title: 'Text Transform',
+		classes: getClasses([
+			{ name: 'uppercase', value: 'uppercase' },
+			{ name: 'lowercase', value: 'lowercase' },
+			{ name: 'capitalize', value: 'capitalize' },
+			{ name: 'normal-case', value: 'none' },
+		], { name: '', value: 'text-transform', scss: 0 })
+	}
+	const TextOverflow = {
+		title: 'Text Overflow',
+		classes: [{
+				name: 'truncate',
+				value: ['overflow: hidden;',
+					'text-overflow: ellipsis;',
+					'white-space: nowrap;'
+				]
+			},
+			{ name: 'text-ellipsis', value: ['text-overflow: ellipsis;'] },
+			{ name: 'text-clip', value: ['text-overflow: clip;'] },
+		]
+	}
+	const TextIndent = {
+		title: 'Text Indent',
+		classes: getClasses(pxs, {
+			name: ['indent-'],
+			value: ['text-indent'],
+		})
+	}
+	const VerticalAlign = {
+		title: 'Vertical Align',
+		classes: getClasses([
+			{ name: 'baseline', value: 'baseline' },
+			{ name: 'top', value: 'top' },
+			{ name: 'middle', value: 'middle' },
+			{ name: 'bottom', value: 'bottom' },
+			{ name: 'text-top', value: 'text-top' },
+			{ name: 'text-bottom', value: 'text-bottom' },
+			{ name: 'sub', value: 'sub' },
+			{ name: 'super', value: 'super' },
+		], { name: 'align-', value: 'vertical-align', scss: 0 })
+	}
+	const Whitespace = { title: 'Whitespace', classes: getClasses(`normal, nowrap, pre, pre-line, pre-wrap, break-spaces`, { name: 'whitespace-', value: 'white-space', scss: 0 }) }
+	const WordBreak = {
+		title: 'WordBreak',
+		classes: [
+			{name: 'break-normal', value: ['overflow-wrap: normal;', 'word-break: normal;']},
+			{name: 'break-words', value: ['overflow-wrap: break-word;']},
+			{name: 'break-all', value: ['word-break: break-all;']},
+			{name: 'break-keep', value: ['word-break: keep-all;']},
+		]
+	}
+	const Hyphens = { title: 'Hyphens', classes: getClasses(`none, manual, auto`, { name: 'hyphens-', value: 'hyphens', scss: 0 }) }
+	const Content = { title: 'Content', classes: getClasses(`none`, { name: 'content-', value: 'content', scss: 0 }) }
+
+
+	return {
+		FontFamily,
+		FontSize,
+		FontSmoothing,
+		FontStyle,
+		FontWeight,
+		FontVariantNumeric,
+		LetterSpacing,
+		LineClamp,
+		LineHeight,
+		ListStyleImage,
+		ListStylePosition,
+		ListStyleType,
+		TextAlign,
+		TextColor,
+		TextDecoration,
+		TextDecorationColor,
+		TextDecorationStyle,
+		TextDecorationThickness,
+		TextUnderlineOffset,
+		TextTransform,
+		TextOverflow,
+		TextIndent,
+		VerticalAlign,
+		Whitespace,
+		WordBreak,
+		Hyphens,
+		Content
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/hooks/useVars.js

@@ -0,0 +1,59 @@
+import useSizes from './useSizes.js'
+
+function useHook() { // 
+	const { Pxs, Pcts, Xls } = useSizes()
+	const pxs = Pxs.map(p => {
+		return {
+			name: p.name,
+			value: `var(--rpx-${p.name})`,
+			px: p.px,
+			rpx: p.px == 1 ? 1 : p.px * 2
+		}
+	})
+	const percents = Pcts.map(p => {
+		return {
+			name: p.name,
+			value: `var(--percent-${p.name})`,
+			percent: typeof p.val == 'string' ? p.val : `${p.val % 1 == 0 ? p.val : p.val.toFixed(6)}%`
+		}
+	})
+	const _borderRadius = 'none: 0, sm: 2, : 4, md: 6, lg: 8, xl: 12, 2xl: 16, 3xl: 24, full: 9999'
+	const borderRadius = _borderRadius.split(',').map(d => {
+		let [name, value] = d.split(':').map(d => d.trim())
+		return {name, value: name ? `var(--rounded-${name})` : `var(--rounded)`, rpx: value * 2}
+	})
+	
+	
+	const xls = Xls.map((d) => {
+		return {
+			...d,
+			value: `var(--text-${d.name})`,
+			lineHeightValue: `var(--text-${d.name}-lineHeight)`,
+			rpx: `${d.fontSize * 2}rpx`,
+		}
+	})
+
+	// 5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95
+	let opacitys = []
+	for(let i = 1; i < 20; i ++) {
+		const _o = i * 5
+		opacitys.push({
+				value: `var(--opacity-${_o})`,
+				calc: `calc(${_o} / 100)`,
+				opacity: _o / 100,
+		})
+	}
+	// const opacitys = [
+	// 	{
+	// 		value: 'var(--opacity-50)',
+	// 		calc: 'calc(50 / 100)',
+	// 		opacity: 50 / 100,
+	// 	}
+	// ]
+	return {
+		pxs, percents, border_radius: borderRadius, xls, opacitys
+	}
+
+}
+
+export default useHook

uni_modules/jc-tailwind/index.js

@@ -0,0 +1,9 @@
+function install(Vue) {
+	// #ifdef VUE3
+	Vue.config.globalProperties.$t = {}
+	// #endif
+}
+
+export default {
+	install
+}

uni_modules/jc-tailwind/index.scss

@@ -0,0 +1,23 @@
+@import './scss/_color.scss';
+@import './scss/_sizes.scss';
+
+@import './scss/Actives/index.scss';
+@import './scss/Backgrounds/index.scss';
+@import './scss/Borders/index.scss';
+@import './scss/Effects/index.scss';
+@import './scss/Filters/index.scss';
+@import './scss/FlexboxGrid/index.scss';
+@import './scss/Interactivity/index.scss';
+@import './scss/Layout/index.scss';
+@import './scss/Sizing/index.scss';
+@import './scss/Spacing/index.scss';
+@import './scss/Transforms/index.scss';
+@import './scss/TransitionsAnimation/index.scss';
+@import './scss/Typography/index.scss';
+
+
+
+
+
+
+

uni_modules/jc-tailwind/package.json

@@ -0,0 +1,80 @@
+{
+	"id": "jc-tailwind",
+	"name": "jc-tailwind",
+	"displayName": "tailwind 纯css版",
+	"version": "0.4.6",
+	"description": "tailwind 整合到小程序 支持 Vue3.0",
+	"keywords": [
+        "Tailwind",
+        "vue3.0",
+        "uniapp"
+    ],
+	"repository": "",
+	"engines": {
+		"HBuilderX": "^3.7.9"
+	},
+	"dcloudext": {
+		"sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "插件不采集任何数据",
+			"permissions": "无"
+		},
+		"npmurl": "",
+		"type": "component-vue"
+	},
+	"uni_modules": {
+		"dependencies": [],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "u",
+					"app-nvue": "u"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "u",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "u",
+					"百度": "u",
+					"字节跳动": "u",
+					"QQ": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+	}
+}

uni_modules/jc-tailwind/readme.md

@@ -0,0 +1,66 @@
+# tailwind css
+
+
+- 官方文档： [点击前往](https://tailwindcss.com/)
+- 作者其它插件：
+	- [tailwind 纯css版](https://ext.dcloud.net.cn/plugin?id=11731)
+	- [jc-scroll-indicator 滚动指示器](https://ext.dcloud.net.cn/plugin?id=11921)
+	- [jc-scroll-tabs](https://ext.dcloud.net.cn/plugin?id=11943)
+	- [jc-form](https://ext.dcloud.net.cn/plugin?id=12174)
+	- [jc-modal](https://ext.dcloud.net.cn/plugin?id=12276)
+	- [jc-pager](https://ext.dcloud.net.cn/plugin?id=12362)
+
+> 支持：H5、微信小程序（其他小程序未测试）
+> 小程序不支持class中含有 / . 等特殊符号，会被转换为空格。所以有以下改动
+
+-  ```/``` 变为 _ 例如 ```w-1/2 变为 w-1_2``` 
+- ```.``` 变为 - 例如 ```w-2.5 变为 w-2-5```
+- 渐变色位置 例如 ```from-0-5```
+- 颜色透明度只支持black和white ```/``` 变为双下划线 ```__``` 例如 ```bg-black/50``` 变为 ```bg-black__50``` 支持的属性有 ```bg-``` ```text-``` ```border-``` ```active-``` 相要使用其他颜色透明度需要自行设置如： ```@include setOpacity('bg-red-500', --bg-opacity)```
+
+
+#### 颜色透明度变量
+
+```css
+--bg-opacity // 背景
+--text-opacity // 文字
+--border-opacity // 边框
+--from-opacity // 渐变起点
+--to-opacity // 渐变终点
+--shadow-opacity // 阴影
+--active-opacity // 活动
+```
+
+
+### 引入方式
+
+* 1、 App.vue 引入基础样式（注意style标签需声明scss属性支持）
+
+```html
+<style lang="scss">
+	@import "./uni_modules/jc-tailwind/index.scss";
+</style>
+```
+
+
+* 2、 查看示例
+
+```html
+<template>
+	<jc-tailwind />
+</template>
+```
+
+
+* 3、 可以自定义项目颜色，支持透明度的写法如下
+
+```html
+	[class*='bg-xx'] {background-color: rgb(0 178 106 / var(--bg-opacity));}
+	[class*='text-xx'] {color: rgb(0 178 106 / var(--text-opacity));}
+	[class*='border-xx'] {border-color: rgb(0 178 106 / var(--border-opacity));}
+	//设置透明度
+	@include setOpacity('bg-xx', --bg-opacity);
+	@include setOpacity('text-xx', --text-opacity);
+	@include setOpacity('border-xx', --border-opacity);
+```
+

uni_modules/jc-tailwind/reset.scss

@@ -0,0 +1,21 @@
+/* #ifndef APP-NVUE */
+// 在weex，也即nvue中，所有元素默认为border-box
+view, text { box-sizing: border-box; }
+/* #endif */
+
+image {
+	display: inline-block;
+	// 解决图片加载时可能会瞬间变形的问题
+	will-change: transform;
+}
+
+page {
+	// 此字体不会引发 字体图标在ios下右侧空白字符问题
+	line-height: 1.5;
+	tab-size: 4;
+	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+	font-feature-settings: normal;
+	font-variation-settings: normal;
+	font-size: 28rpx;
+	font-weight: 400;
+}

uni_modules/jc-tailwind/scss/Actives/Active.scss

@@ -0,0 +1,54 @@
+// Actives
+@each $i in $colorIndexes {
+	@each $name, $colors in $colorNames {
+		$colorName: --color-#{$name}-#{$i};
+		[class*='active-#{$name}-#{$i}'] {
+			&:active {
+				background-color: RGB(var($colorName) / var(--active-opacity));
+			}
+		}
+		
+		[class*='active-text-#{$name}-#{$i}'] {
+			&:active {
+				color: RGB(var($colorName) / var(--active-opacity));
+			}
+		}
+		
+		// .active-#{$name}-#{$i} {
+		// 	&:active {
+		// 		background-color: RGB(var($colorName) / var(--active-opacity));
+		// 	}
+		// }
+		
+		// @include setOpacity(active-#{$name}-#{$i}, --active-opacity);
+	}
+}
+
+@each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' 'RGB(0 0 0 / var(--active-opacity))', 'white' 'RGB(255 255 255 / var(--active-opacity))'{
+	[class*='active-#{$name}'] {
+		&:active {
+			background-color: #{$val};
+		}
+	}
+	
+	[class*='active-text-#{$name}'] {
+		&:active {
+			color: #{$val};
+		}
+	}
+	// .active-#{$name} {
+	// 	&:active {
+	// 		background-color: #{$val};
+	// 	}
+	// }
+	
+	// @include setOpacity(active-#{$name}, --active-opacity);
+}
+
+@each $name, $val in 'black' 'RGB(0 0 0 / var(--active-opacity))', 'white' 'RGB(255 255 255 / var(--active-opacity))'{
+	@include setOpacity(active-#{$name}, --active-opacity);
+}
+
+@each $name, $val in 'black' 'RGB(0 0 0 / var(--active-opacity))', 'white' 'RGB(255 255 255 / var(--active-opacity))'{
+	@include setOpacity(active-text-#{$name}, --active-opacity);
+}

uni_modules/jc-tailwind/scss/Actives/index.scss

@@ -0,0 +1,3 @@
+@import './Active.scss';
+
+

uni_modules/jc-tailwind/scss/Backgrounds/BackgroundAttachment.scss

@@ -0,0 +1 @@
+// backgroundAttachment
$backgroundAttachments: 'bg-fixed' 'fixed','bg-local' 'local','bg-scroll' 'scroll';
@each $name, $val in $backgroundAttachments {	.#{$name} {background-attachment: #{$val};}}

uni_modules/jc-tailwind/scss/Backgrounds/BackgroundClip.scss

@@ -0,0 +1 @@
+// backgroundClip
$backgroundClips: 'bg-clip-border' 'border-box','bg-clip-padding' 'padding-box','bg-clip-content' 'content-box','bg-clip-text' 'text';
@each $name, $val in $backgroundClips {	.#{$name} {background-clip: #{$val};}}

uni_modules/jc-tailwind/scss/Backgrounds/BackgroundColor.scss

@@ -0,0 +1,65 @@
+// Colors
+
+// Background Color
+@each $i in $colorIndexes {
+	@each $name, $colors in $colorNames {
+		$colorName: --color-#{$name}-#{$i};
+		// .bg-#{$name}-#{$i} {background-color: RGB(var($colorName) / var(--bg-opacity));}
+		[class*='bg-#{$name}-#{$i}'] {
+			background-color: RGB(var($colorName) / var(--bg-opacity));
+		}
+		// @include setOpacity(bg-#{$name}-#{$i}, --bg-opacity);
+	}
+}
+
+@each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' 'RGB(0 0 0 / var(--bg-opacity))', 'white' 'RGB(255 255 255 / var(--bg-opacity))'{
+	// .bg-#{$name} {background-color: $val;}
+	[class*='bg-#{$name}'] {
+		background-color: #{$val};
+	}
+}
+
+@each $name, $val in 'black' 'RGB(0 0 0 / var(--bg-opacity))', 'white' 'RGB(255 255 255 / var(--bg-opacity))'{
+	@include setOpacity(bg-#{$name}, --bg-opacity);
+}
+
+
+
+// @each $i in 5,10,20,30,40,50,60,70,80,90 {
+// 	.bg-black_#{$i} {background-color: rgba(0, 0, 0, calc(#{$i} / 100));}
+// 	.bg-white_#{$i} {background-color: rgba(255, 255, 255, calc(#{$i} / 100));}
+// }
+
+
+// 条纹
+@each $name, $colors in $colorNames {
+	$colorName: --color-#{$name}-500;
+	$currentOpacityBgColor: RGB(0 0 0 / 0);
+	$currentOpacityColor: RGB(var($colorName) / var(--color-opacity));
+	// .bg-stripes-#{$name} {
+	// 	background-color: var(--color-#{$name}-50);
+	// 	background-image: linear-gradient(135deg, $currentOpacityColor 10%, $currentOpacityBgColor 0, $currentOpacityBgColor 50%, $currentOpacityColor 0, $currentOpacityColor 60%, $currentOpacityBgColor 0, $currentOpacityBgColor);
+	// 	background-size: calc(7.07 * 2rpx) calc(7.07 * 2rpx);
+	// }
+	
+	[class*='bg-stripes-#{$name}'] {
+		--color-opacity: .5;
+		background-color: RGB(var(--color-#{$name}-50) / var(--color-opacity));
+		background-image: linear-gradient(135deg, $currentOpacityColor 10%, $currentOpacityBgColor 0, $currentOpacityBgColor 50%, $currentOpacityColor 0, $currentOpacityColor 60%, $currentOpacityBgColor 0, $currentOpacityBgColor);
+		background-size: calc(7.07 * 2rpx) calc(7.07 * 2rpx);
+	}
+}
+
+.bg-stripes-white {
+	$bgWhite: RGB(255 255 255 / .75);
+	$bgBlack: RGB(0 0 0 / 0);
+	background-image: linear-gradient(135deg,$bgWhite 10%,$bgBlack 0,$bgBlack 50%,$bgWhite 0,$bgWhite 60%,$bgBlack 0,$bgBlack);
+	background-size: calc(7.07 * 2rpx) calc(7.07 * 2rpx);
+}
+
+.bg-stripes-black {
+	$bgWhite: RGB(0 0 0 / .25);
+	$bgBlack: RGB(0 0 0 / 0);
+	background-image: linear-gradient(135deg,$bgWhite 10%,$bgBlack 0,$bgBlack 50%,$bgWhite 0,$bgWhite 60%,$bgBlack 0,$bgBlack);
+	background-size: calc(7.07 * 2rpx) calc(7.07 * 2rpx);
+}

uni_modules/jc-tailwind/scss/Backgrounds/BackgroundImage.scss

@@ -0,0 +1,4 @@
+// Background Image
+// .bg-gradient-to-r {background-image: linear-gradient(to top right, var(--gradient-stops));}
+
+$backgroundImages: 'bg-none' 'none','bg-gradient-to-t' 'linear-gradient(to top, var(--gradient-stops))','bg-gradient-to-tr' 'linear-gradient(to top right, var(--gradient-stops))','bg-gradient-to-r' 'linear-gradient(to right, var(--gradient-stops))','bg-gradient-to-br' 'linear-gradient(to bottom right, var(--gradient-stops))','bg-gradient-to-b' 'linear-gradient(to bottom, var(--gradient-stops))','bg-gradient-to-bl	' 'linear-gradient(to bottom left, var(--gradient-stops))','bg-gradient-to-l' 'linear-gradient(to left, var(--gradient-stops))','bg-gradient-to-tl' 'linear-gradient(to top left, var(--gradient-stops))';
@each $name, $val in $backgroundImages {	.#{$name} {background-image: #{$val};}}

uni_modules/jc-tailwind/scss/Backgrounds/BackgroundOrigin.scss

@@ -0,0 +1 @@
+// backgroundOrigin
$backgroundOrigins: 'bg-origin-border' 'border-box','bg-origin-padding' 'padding-box','bg-origin-content' 'content-box';
@each $name, $val in $backgroundOrigins {	.#{$name} {background-origin: #{$val};}}

uni_modules/jc-tailwind/scss/Backgrounds/BackgroundPosition.scss

@@ -0,0 +1 @@
+// backgroundPosition
$backgroundPositions: 'bg-bottom' 'bottom','bg-center' 'center','bg-left' 'left','bg-left-bottom' 'left bottom','bg-left-top' 'left top','bg-right' 'right','bg-right-bottom' 'right bottom','bg-right-top' 'right top','bg-top' 'top';
@each $name, $val in $backgroundPositions {	.#{$name} {background-position: #{$val};}}

uni_modules/jc-tailwind/scss/Backgrounds/BackgroundRepeat.scss

@@ -0,0 +1 @@
+// backgroundRepeat
$backgroundRepeats: 'bg-repeat' 'repeat','bg-no-repeat' 'no-repeat','bg-repeat-x' 'repeat-x','bg-repeat-y' 'repeat-y','bg-repeat-round' 'round','bg-repeat-space' 'space';
@each $name, $val in $backgroundRepeats {	.#{$name} {background-repeat: #{$val};}}

uni_modules/jc-tailwind/scss/Backgrounds/BackgroundSize.scss

@@ -0,0 +1 @@
+// backgroundSize
$backgroundSizes: 'bg-auto' 'auto','bg-cover' 'cover','bg-contain' 'contain';
@each $name, $val in $backgroundSizes {	.#{$name} {background-size: #{$val};}}

uni_modules/jc-tailwind/scss/Backgrounds/GradientColorStops.scss

@@ -0,0 +1,93 @@
+// Colors
+// $slates: '#f8fafc','#f1f5f9','#e2e8f0','#cbd5e1','#94a3b8','#64748b','#475569','#334155','#1e293b','#0f172a','#020617';
+// $grays: '#f9fafb','#f3f4f6','#e5e7eb','#d1d5db','#9ca3af','#6b7280','#4b5563','#374151','#1f2937','#111827','#030712';
+// $zincs: '#fafafa','#f4f4f5','#e4e4e7','#d4d4d8','#a1a1aa','#71717a','#52525b','#3f3f46','#27272a','#18181b','#09090b';
+// $neutrals: '#fafafa','#f5f5f5','#e5e5e5','#d4d4d4','#a3a3a3','#737373','#525252','#404040','#262626','#171717','#0a0a0a';
+// $stones: '#fafaf9','#f5f5f4','#e7e5e4','#d6d3d1','#a8a29e','#78716c','#57534e','#44403c','#292524','#1c1917','#0c0a09';
+// $reds: '#fef2f2','#fee2e2','#fecaca','#fca5a5','#f87171','#ef4444','#dc2626','#b91c1c','#991b1b','#7f1d1d','#450a0a';
+// $oranges: '#fff7ed','#ffedd5','#fed7aa','#fdba74','#fb923c','#f97316','#ea580c','#c2410c','#9a3412','#7c2d12','#431407';
+// $ambers: '#fffbeb','#fef3c7','#fde68a','#fcd34d','#fbbf24','#f59e0b','#d97706','#b45309','#92400e','#78350f','#451a03';
+// $yellows: '#fefce8','#fef9c3','#fef08a','#fde047','#facc15','#eab308','#ca8a04','#a16207','#854d0e','#713f12','#422006';
+// $limes: '#f7fee7','#ecfccb','#d9f99d','#bef264','#a3e635','#84cc16','#65a30d','#4d7c0f','#3f6212','#365314','#1a2e05';
+// $greens: '#f0fdf4','#dcfce7','#bbf7d0','#86efac','#4ade80','#22c55e','#16a34a','#15803d','#166534','#14532d','#052e16';
+// $emeralds: '#ecfdf5','#d1fae5','#a7f3d0','#6ee7b7','#34d399','#10b981','#059669','#047857','#065f46','#064e3b','#022c22';
+// $teals: '#f0fdfa','#ccfbf1','#99f6e4','#5eead4','#2dd4bf','#14b8a6','#0d9488','#0f766e','#115e59','#134e4a','#042f2e';
+// $cyans: '#ecfeff','#cffafe','#a5f3fc','#67e8f9','#22d3ee','#06b6d4','#0891b2','#0e7490','#155e75','#164e63','#083344';
+// $skys: '#f0f9ff','#e0f2fe','#bae6fd','#7dd3fc','#38bdf8','#0ea5e9','#0284c7','#0369a1','#075985','#0c4a6e','#082f49';
+// $blues: '#eff6ff','#dbeafe','#bfdbfe','#93c5fd','#60a5fa','#3b82f6','#2563eb','#1d4ed8','#1e40af','#1e3a8a','#172554';
+// $indigos: '#eef2ff','#e0e7ff','#c7d2fe','#a5b4fc','#818cf8','#6366f1','#4f46e5','#4338ca','#3730a3','#312e81','#1e1b4b';
+// $violets: '#f5f3ff','#ede9fe','#ddd6fe','#c4b5fd','#a78bfa','#8b5cf6','#7c3aed','#6d28d9','#5b21b6','#4c1d95','#2e1065';
+// $purples: '#faf5ff','#f3e8ff','#e9d5ff','#d8b4fe','#c084fc','#a855f7','#9333ea','#7e22ce','#6b21a8','#581c87','#3b0764';
+// $fuchsias: '#fdf4ff','#fae8ff','#f5d0fe','#f0abfc','#e879f9','#d946ef','#c026d3','#a21caf','#86198f','#701a75','#4a044e';
+// $pinks: '#fdf2f8','#fce7f3','#fbcfe8','#f9a8d4','#f472b6','#ec4899','#db2777','#be185d','#9d174d','#831843','#500724';
+// $roses: '#fff1f2','#ffe4e6','#fecdd3','#fda4af','#fb7185','#f43f5e','#e11d48','#be123c','#9f1239','#881337','#4c0519';
+
+// $colorNames: ('slate': $slates,'gray': $grays,'zinc': $zincs,'neutral': $neutrals,'stone': $stones,'red': $reds,'orange': $oranges,'amber': $ambers,'yellow': $yellows,'lime': $limes,'green': $greens,'emerald': $emeralds,'teal': $teals,'cyan': $cyans,'sky': $skys,'blue': $blues,'indigo': $indigos,'violet': $violets,'purple': $purples,'fuchsia': $fuchsias,'pink': $pinks,'rose': $roses);
+
+// $colorIndexes: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;
+
+
+
+
+// Gradient Color Stops
+@each $i in $colorIndexes {
+	@each $name, $colors in $colorNames {
+		$colorName: --color-#{$name}-#{$i};
+		
+		[class*='from-#{$name}-#{$i}'] {
+			--gradient-from-position: 0%;
+			--gradient-from: rgb(var(#{$colorName}) / var(--from-opacity)) var(--gradient-from-position);
+			
+			--gradient-to-position: 100%;
+			--gradient-to: rgba(0,0,0,0) var(--gradient-to-position);
+			
+			--gradient-stops: var(--gradient-from), var(--gradient-to);
+		}
+		
+		// @include setOpacity(from-#{$name}-#{$i}, --from-opacity);
+	}
+}
+
+@each $i in $colorIndexes {
+	@each $name, $colors in $colorNames {
+		$colorName: --color-#{$name}-#{$i};
+		
+		[class*='to-#{$name}-#{$i}'] {
+			--gradient-to: rgb(var(#{$colorName}) / var(--to-opacity)) var(--gradient-to-position);
+		}
+		
+		// @include setOpacity(to-#{$name}-#{$i}, --to-opacity);
+	}
+}
+
+@for $i from 1 to 10 {
+	.from-0-#{$i} {
+		--gradient-from-position: calc(#{$i} * 10 * 1%);
+	}
+}
+@for $i from 1 to 10 {
+	.to-0-#{$i} {
+		--gradient-to-position: calc(#{$i} * 10 * 1%);
+	}
+}
+
+
+// 
+
+@each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' black, 'white' white{
+	.from-#{$name} {
+		--gradient-from-position: 0%;
+		--gradient-from: #{$val} var(--gradient-from-position);
+		
+		--gradient-to-position: 100%;
+		--gradient-to: #{$val}  var(--gradient-from-position);
+		
+		--gradient-stops: var(--gradient-from), var(--gradient-to);
+	}
+}
+
+@each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' black, 'white' white{
+	.to-#{$name} {
+		--gradient-to: #{$val} var(--gradient-to-position);
+	}
+}

uni_modules/jc-tailwind/scss/Backgrounds/index.scss

@@ -0,0 +1,12 @@
+
+@import './BackgroundClip.scss';
+@import './BackgroundSize.scss';
+@import './BackgroundColor.scss';
+@import './BackgroundImage.scss';
+@import './BackgroundOrigin.scss';
+@import './BackgroundRepeat.scss';
+@import './BackgroundPosition.scss';
+@import './GradientColorStops.scss';
+@import './BackgroundAttachment.scss';
+
+

uni_modules/jc-tailwind/scss/Borders/BorderColor.scss

@@ -0,0 +1,55 @@
+// BorderColor
+
+// $slates: '#f8fafc','#f1f5f9','#e2e8f0','#cbd5e1','#94a3b8','#64748b','#475569','#334155','#1e293b','#0f172a','#020617';
+// $grays: '#f9fafb','#f3f4f6','#e5e7eb','#d1d5db','#9ca3af','#6b7280','#4b5563','#374151','#1f2937','#111827','#030712';
+// $zincs: '#fafafa','#f4f4f5','#e4e4e7','#d4d4d8','#a1a1aa','#71717a','#52525b','#3f3f46','#27272a','#18181b','#09090b';
+// $neutrals: '#fafafa','#f5f5f5','#e5e5e5','#d4d4d4','#a3a3a3','#737373','#525252','#404040','#262626','#171717','#0a0a0a';
+// $stones: '#fafaf9','#f5f5f4','#e7e5e4','#d6d3d1','#a8a29e','#78716c','#57534e','#44403c','#292524','#1c1917','#0c0a09';
+// $reds: '#fef2f2','#fee2e2','#fecaca','#fca5a5','#f87171','#ef4444','#dc2626','#b91c1c','#991b1b','#7f1d1d','#450a0a';
+// $oranges: '#fff7ed','#ffedd5','#fed7aa','#fdba74','#fb923c','#f97316','#ea580c','#c2410c','#9a3412','#7c2d12','#431407';
+// $ambers: '#fffbeb','#fef3c7','#fde68a','#fcd34d','#fbbf24','#f59e0b','#d97706','#b45309','#92400e','#78350f','#451a03';
+// $yellows: '#fefce8','#fef9c3','#fef08a','#fde047','#facc15','#eab308','#ca8a04','#a16207','#854d0e','#713f12','#422006';
+// $limes: '#f7fee7','#ecfccb','#d9f99d','#bef264','#a3e635','#84cc16','#65a30d','#4d7c0f','#3f6212','#365314','#1a2e05';
+// $greens: '#f0fdf4','#dcfce7','#bbf7d0','#86efac','#4ade80','#22c55e','#16a34a','#15803d','#166534','#14532d','#052e16';
+// $emeralds: '#ecfdf5','#d1fae5','#a7f3d0','#6ee7b7','#34d399','#10b981','#059669','#047857','#065f46','#064e3b','#022c22';
+// $teals: '#f0fdfa','#ccfbf1','#99f6e4','#5eead4','#2dd4bf','#14b8a6','#0d9488','#0f766e','#115e59','#134e4a','#042f2e';
+// $cyans: '#ecfeff','#cffafe','#a5f3fc','#67e8f9','#22d3ee','#06b6d4','#0891b2','#0e7490','#155e75','#164e63','#083344';
+// $skys: '#f0f9ff','#e0f2fe','#bae6fd','#7dd3fc','#38bdf8','#0ea5e9','#0284c7','#0369a1','#075985','#0c4a6e','#082f49';
+// $blues: '#eff6ff','#dbeafe','#bfdbfe','#93c5fd','#60a5fa','#3b82f6','#2563eb','#1d4ed8','#1e40af','#1e3a8a','#172554';
+// $indigos: '#eef2ff','#e0e7ff','#c7d2fe','#a5b4fc','#818cf8','#6366f1','#4f46e5','#4338ca','#3730a3','#312e81','#1e1b4b';
+// $violets: '#f5f3ff','#ede9fe','#ddd6fe','#c4b5fd','#a78bfa','#8b5cf6','#7c3aed','#6d28d9','#5b21b6','#4c1d95','#2e1065';
+// $purples: '#faf5ff','#f3e8ff','#e9d5ff','#d8b4fe','#c084fc','#a855f7','#9333ea','#7e22ce','#6b21a8','#581c87','#3b0764';
+// $fuchsias: '#fdf4ff','#fae8ff','#f5d0fe','#f0abfc','#e879f9','#d946ef','#c026d3','#a21caf','#86198f','#701a75','#4a044e';
+// $pinks: '#fdf2f8','#fce7f3','#fbcfe8','#f9a8d4','#f472b6','#ec4899','#db2777','#be185d','#9d174d','#831843','#500724';
+// $roses: '#fff1f2','#ffe4e6','#fecdd3','#fda4af','#fb7185','#f43f5e','#e11d48','#be123c','#9f1239','#881337','#4c0519';
+
+// $colorNames: ('slate': $slates,'gray': $grays,'zinc': $zincs,'neutral': $neutrals,'stone': $stones,'red': $reds,'orange': $oranges,'amber': $ambers,'yellow': $yellows,'lime': $limes,'green': $greens,'emerald': $emeralds,'teal': $teals,'cyan': $cyans,'sky': $skys,'blue': $blues,'indigo': $indigos,'violet': $violets,'purple': $purples,'fuchsia': $fuchsias,'pink': $pinks,'rose': $roses);
+
+// $colorIndexes: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;
+
+
+@each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' 'RGB(0 0 0 / var(--border-opacity))', 'white' 'RGB(255 255 255 / var(--border-opacity))'{
+	// .border-#{$name} {border-color: #{$val};}
+	[class*='border-#{$name}'] { border-color: #{$val}; }
+}
+
+@each $name, $val in 'black' 'RGB(0 0 0 / var(--border-opacity))', 'white' 'RGB(255 255 255 / var(--border-opacity))'{
+	@include setOpacity(border-#{$name}, --border-opacity);
+}
+
+@each $i in $colorIndexes {
+	@each $name, $colors in $colorNames {
+		$colorName: --color-#{$name}-#{$i};
+		[class*='border-#{$name}-#{$i}'] {
+			border-color: RGB(var($colorName) / var(--border-opacity));
+		}
+		
+		// .border-#{$name}-#{$i} {border-color: RGB(var($colorName) / var(--border-opacity));}
+		
+		// @include setOpacity(border-#{$name}-#{$i}, --border-opacity);
+	}
+}
+
+@each $n, $v in t top, r right, b bottom, l left {
+	.border-#{$n}-transparent {border-#{$v}-color: transparent;}
+}

uni_modules/jc-tailwind/scss/Borders/BorderRadius.scss

@@ -0,0 +1,54 @@
+$varPre: '';
+$borderRadius: 'none' 0, 'sm' 2, '' 4, 'md' 6, 'lg' 8, 'xl' 12, '2xl' 16, '3xl' 24, 'full' 9999;
+
+@mixin setBorderRadius($arr) {
+	@each $name, $val in $arr{
+		$varName: '';
+		@if($name != '') {
+			$varName: --#{$varPre}rounded-#{$name};
+		} @else {
+			$varName: --#{$varPre}rounded;
+		}
+		@include render($name, $varName);
+	}
+}
+
+// border Radius
+@mixin render($name, $varName) {
+	@if ($name != '') {
+		.rounded-#{$name} { border-radius: var($varName); }
+		
+		.rounded-s-#{$name} { border-start-start-radius: var($varName); border-end-start-radius: var($varName); }
+		.rounded-e-#{$name} { border-start-end-radius: var($varName); border-end-end-radius: var($varName); }
+		.rounded-t-#{$name} { border-top-left-radius: var($varName); border-top-right-radius: var($varName); }
+		.rounded-r-#{$name} { border-top-right-radius: var($varName); border-bottom-right-radius: var($varName); }
+		.rounded-b-#{$name} { border-bottom-right-radius: var($varName); border-bottom-left-radius: var($varName); }
+		.rounded-l-#{$name} { border-top-left-radius: var($varName); border-bottom-left-radius: var($varName); }
+		.rounded-ss-#{$name} { border-start-start-radius: var($varName); }
+		.rounded-se-#{$name} { border-start-end-radius: var($varName); }
+		.rounded-ee-#{$name} { border-end-end-radius: var($varName); }
+		.rounded-es-#{$name} { border-end-start-radius: var($varName); }
+		.rounded-tl-#{$name} { border-top-left-radius: var($varName); }
+		.rounded-tr-#{$name} { border-top-right-radius: var($varName); }
+		.rounded-br-#{$name} { border-bottom-right-radius: var($varName); }
+		.rounded-bl-#{$name} { border-bottom-left-radius: var($varName); }
+	} @else {
+		.rounded { border-radius: var($varName);  }
+		.rounded-s { border-start-start-radius: var($varName); border-end-start-radius: var($varName); }
+		.rounded-e { border-start-end-radius: var($varName); border-end-end-radius: var($varName); }
+		.rounded-t { border-top-left-radius: var($varName); border-top-right-radius: var($varName); }
+		.rounded-r { border-top-right-radius: var($varName); border-bottom-right-radius: var($varName); }
+		.rounded-b { border-bottom-right-radius: var($varName); border-bottom-left-radius: var($varName); }
+		.rounded-l { border-top-left-radius: var($varName); border-bottom-left-radius: var($varName); }
+		.rounded-ss { border-start-start-radius: var($varName); }
+		.rounded-se { border-start-end-radius: var($varName); }
+		.rounded-ee { border-end-end-radius: var($varName); }
+		.rounded-es { border-end-start-radius: var($varName); }
+		.rounded-tl { border-top-left-radius: var($varName); }
+		.rounded-tr { border-top-right-radius: var($varName); }
+		.rounded-br { border-bottom-right-radius: var($varName); }
+		.rounded-bl { border-bottom-left-radius: var($varName); }
+	}
+	
+}
+@include setBorderRadius($borderRadius);

uni_modules/jc-tailwind/scss/Borders/BorderStyle.scss

@@ -0,0 +1,6 @@
+// Border Style
+$arr: solid, dashed, dotted, double, hidden, none;
+
+@each $name in $arr {
+	.border-#{$name} { border-style: $name;}
+}

uni_modules/jc-tailwind/scss/Borders/BorderWidth.scss

@@ -0,0 +1,36 @@
+// Border Width
+[class*='border-'] {
+	border: 0 solid RGB(0 0 0 / var(--border-opacity));
+}
+$arr: '', 0, 2, 3, 4, 8;
+
+@mixin render($name, $val) {
+	.border#{$name} { border-width: $val; }
+}
+
+@mixin renderOther($name, $val) {
+	.border-x#{$name} { border-left-width: $val; border-right-width: $val; }
+	.border-y#{$name} { border-top-width: $val; border-bottom-width: $val; }
+	.border-s#{$name} { border-inline-start-width: $val; }
+	.border-e#{$name} { border-inline-end-width: $val; }
+	.border-t#{$name} { border-top-width: $val; }
+	.border-r#{$name} { border-right-width: $val; }
+	.border-b#{$name} { border-bottom-width: $val; }
+	.border-l#{$name} { border-left-width: $val; }
+}
+
+@each $name in $arr {
+	@if ($name == '') {
+		@include render($name, 1rpx);
+	} @else {
+		@include render(-#{$name}, #{$name * 2}rpx);
+	}
+}
+
+@each $name in $arr {
+	@if ($name == '') {
+		@include renderOther($name, 1rpx);
+	} @else {
+		@include renderOther(-#{$name}, #{$name * 2}rpx);
+	}
+}

uni_modules/jc-tailwind/scss/Borders/index.scss

@@ -0,0 +1,15 @@
+@import './BorderRadius.scss';
+@import './BorderWidth.scss';
+@import './BorderColor.scss';
+@import './BorderStyle.scss';
+@import './DivideWidth.scss';
+@import './DivideColor.scss';
+@import './DivideStyle.scss';
+@import './OutlineWidth.scss';
+@import './OutlineColor.scss';
+@import './OutlineStyle.scss';
+@import './OutlineOffset.scss';
+@import './RingWidth.scss';
+@import './RingColor.scss';
+@import './RingOffsetWidth.scss';
+@import './RingOffsetColor.scss';

uni_modules/jc-tailwind/scss/Effects/BoxShadow.scss

@@ -0,0 +1,34 @@
+// boxShadow
// $boxShadows: 'shadow-sm' '0 1rpx 4rpx 0 rgba(0, 0, 0, 0.05)','shadow' '0 1rpx 6rpx 0 rgba(0, 0, 0, 0.1), 0 1rpx 4rpx -1rpx rgba(0, 0, 0, 0.1)','shadow-md' '0 8rpx 6px -1rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -4rpx rgba(0, 0, 0, 0.1)','shadow-lg' '0 10px 15px -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 6px -8rpx rgba(0, 0, 0, 0.1)','shadow-xl' '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)','shadow-2xl' '0 25px 50px -24rpx rgba(0, 0, 0, 0.25)','shadow-inner' 'inset 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05)','shadow-none' '0 0 #000';
// @each $name, $val in $boxShadows {	.#{$name} {box-shadow: #{$val};}}
+
+.shadow-sm{
+	--shadow-color: rgba(0,0,0,0.05);
+	box-shadow:0 1rpx 4rpx 0 var(--shadow-color);
+}
+.shadow{
+	--shadow-color: rgba(0,0,0,0.1);
+	box-shadow:0 1rpx 6rpx 0 var(--shadow-color),0 1rpx 4rpx -1rpx var(--shadow-color);
+}
+.shadow-md{
+	--shadow-color: rgba(0,0,0,0.1);
+	box-shadow:0 8rpx 6px -1rpx var(--shadow-color),0 4rpx 8rpx -4rpx var(--shadow-color);
+}
+.shadow-lg{
+	--shadow-color: rgba(0,0,0,0.1);
+	box-shadow:0 10px 15px -6rpx var(--shadow-color),0 8rpx 6px -8rpx var(--shadow-color);
+}
+.shadow-xl{
+	--shadow-color: rgba(0,0,0,0.1);
+	box-shadow:0 20px 25px -5px var(--shadow-color),0 8px 10px -6px var(--shadow-color);
+}
+.shadow-2xl{
+	--shadow-color: rgba(0,0,0,0.25);
+	box-shadow:0 25px 50px -24rpx var(--shadow-color);
+}
+.shadow-inner{
+	--shadow-color: rgba(0,0,0,0.05);
+	box-shadow:inset 0 4rpx 8rpx 0 var(--shadow-color);
+}
+.shadow-none{
+	--shadow-color: #000;
+	box-shadow:0 0 var(--shadow-color);
+}

uni_modules/jc-tailwind/scss/Effects/BoxShadowColor.scss

@@ -0,0 +1,51 @@
+// Colors
+$slates: '#f8fafc','#f1f5f9','#e2e8f0','#cbd5e1','#94a3b8','#64748b','#475569','#334155','#1e293b','#0f172a','#020617';
+$grays: '#f9fafb','#f3f4f6','#e5e7eb','#d1d5db','#9ca3af','#6b7280','#4b5563','#374151','#1f2937','#111827','#030712';
+$zincs: '#fafafa','#f4f4f5','#e4e4e7','#d4d4d8','#a1a1aa','#71717a','#52525b','#3f3f46','#27272a','#18181b','#09090b';
+$neutrals: '#fafafa','#f5f5f5','#e5e5e5','#d4d4d4','#a3a3a3','#737373','#525252','#404040','#262626','#171717','#0a0a0a';
+$stones: '#fafaf9','#f5f5f4','#e7e5e4','#d6d3d1','#a8a29e','#78716c','#57534e','#44403c','#292524','#1c1917','#0c0a09';
+$reds: '#fef2f2','#fee2e2','#fecaca','#fca5a5','#f87171','#ef4444','#dc2626','#b91c1c','#991b1b','#7f1d1d','#450a0a';
+$oranges: '#fff7ed','#ffedd5','#fed7aa','#fdba74','#fb923c','#f97316','#ea580c','#c2410c','#9a3412','#7c2d12','#431407';
+$ambers: '#fffbeb','#fef3c7','#fde68a','#fcd34d','#fbbf24','#f59e0b','#d97706','#b45309','#92400e','#78350f','#451a03';
+$yellows: '#fefce8','#fef9c3','#fef08a','#fde047','#facc15','#eab308','#ca8a04','#a16207','#854d0e','#713f12','#422006';
+$limes: '#f7fee7','#ecfccb','#d9f99d','#bef264','#a3e635','#84cc16','#65a30d','#4d7c0f','#3f6212','#365314','#1a2e05';
+$greens: '#f0fdf4','#dcfce7','#bbf7d0','#86efac','#4ade80','#22c55e','#16a34a','#15803d','#166534','#14532d','#052e16';
+$emeralds: '#ecfdf5','#d1fae5','#a7f3d0','#6ee7b7','#34d399','#10b981','#059669','#047857','#065f46','#064e3b','#022c22';
+$teals: '#f0fdfa','#ccfbf1','#99f6e4','#5eead4','#2dd4bf','#14b8a6','#0d9488','#0f766e','#115e59','#134e4a','#042f2e';
+$cyans: '#ecfeff','#cffafe','#a5f3fc','#67e8f9','#22d3ee','#06b6d4','#0891b2','#0e7490','#155e75','#164e63','#083344';
+$skys: '#f0f9ff','#e0f2fe','#bae6fd','#7dd3fc','#38bdf8','#0ea5e9','#0284c7','#0369a1','#075985','#0c4a6e','#082f49';
+$blues: '#eff6ff','#dbeafe','#bfdbfe','#93c5fd','#60a5fa','#3b82f6','#2563eb','#1d4ed8','#1e40af','#1e3a8a','#172554';
+$indigos: '#eef2ff','#e0e7ff','#c7d2fe','#a5b4fc','#818cf8','#6366f1','#4f46e5','#4338ca','#3730a3','#312e81','#1e1b4b';
+$violets: '#f5f3ff','#ede9fe','#ddd6fe','#c4b5fd','#a78bfa','#8b5cf6','#7c3aed','#6d28d9','#5b21b6','#4c1d95','#2e1065';
+$purples: '#faf5ff','#f3e8ff','#e9d5ff','#d8b4fe','#c084fc','#a855f7','#9333ea','#7e22ce','#6b21a8','#581c87','#3b0764';
+$fuchsias: '#fdf4ff','#fae8ff','#f5d0fe','#f0abfc','#e879f9','#d946ef','#c026d3','#a21caf','#86198f','#701a75','#4a044e';
+$pinks: '#fdf2f8','#fce7f3','#fbcfe8','#f9a8d4','#f472b6','#ec4899','#db2777','#be185d','#9d174d','#831843','#500724';
+$roses: '#fff1f2','#ffe4e6','#fecdd3','#fda4af','#fb7185','#f43f5e','#e11d48','#be123c','#9f1239','#881337','#4c0519';
+
+$colorNames: ('slate': $slates,'gray': $grays,'zinc': $zincs,'neutral': $neutrals,'stone': $stones,'red': $reds,'orange': $oranges,'amber': $ambers,'yellow': $yellows,'lime': $limes,'green': $greens,'emerald': $emeralds,'teal': $teals,'cyan': $cyans,'sky': $skys,'blue': $blues,'indigo': $indigos,'violet': $violets,'purple': $purples,'fuchsia': $fuchsias,'pink': $pinks,'rose': $roses);
+
+$colorIndexes: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;
+
+// Box Shadow Color
+@each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' 'RGB(0 0 0 / var(--shadow-opacity))', 'white' 'RGB(255 255 255 / var(--shadow-opacity))'{
+	// .shadow-#{$name} {
+	// 	--shadow-color: #{$val};
+	// }
+	
+	[class*='shadow-#{$name}'] {
+		--shadow-color: #{$val};
+	}
+	
+	// @include setOpacity(shadow-#{$name}, --shadow-opacity);
+}
+@each $i in $colorIndexes {
+	@each $name, $colors in $colorNames {
+		$colorName: --color-#{$name}-#{$i};
+		
+		[class*='shadow-#{$name}-#{$i}'] {
+			--shadow-color: RGB(var(#{$colorName}) / var(--shadow-opacity));
+		}
+		
+		// @include setOpacity(shadow-#{$name}-#{$i}, --shadow-opacity);
+	}
+}

uni_modules/jc-tailwind/scss/Effects/Opacity.scss

@@ -0,0 +1 @@
+// opacity
$opacitys: 'opacity-0' '0','opacity-5' '0.05','opacity-10' '0.1','opacity-20' '0.2','opacity-25' '0.25','opacity-30' '0.3','opacity-40' '0.4','opacity-50' '0.5','opacity-60' '0.6','opacity-70' '0.7','opacity-75' '0.75','opacity-80' '0.8','opacity-90' '0.9','opacity-95' '0.95','opacity-100' '1';
@each $name, $val in $opacitys {	.#{$name} {opacity: #{$val};}}

uni_modules/jc-tailwind/scss/Effects/index.scss

@@ -0,0 +1,5 @@
+@import './BoxShadow.scss';
+@import './BoxShadowColor.scss';
+@import './Opacity.scss';
+@import './MixBlendMode.scss';
+@import './BackgroundBlendMode.scss';

uni_modules/jc-tailwind/scss/Filters/BackdropBlur.scss

@@ -0,0 +1 @@
+// backdrop Blur
$backdropFilters: 'backdrop-blur-none' 'blur(0)','backdrop-blur-sm' 'blur(8rpx)','backdrop-blur' 'blur(16rpx)','backdrop-blur-md' 'blur(24rpx)','backdrop-blur-lg' 'blur(32rpx)','backdrop-blur-xl' 'blur(48rpx)','backdrop-blur-2xl' 'blur(80rpx)','backdrop-blur-3xl' 'blur(128rpx)';
@each $name, $val in $backdropFilters {	.#{$name} {backdrop-filter: #{$val};}}

uni_modules/jc-tailwind/scss/Filters/BackdropOpacity.scss

@@ -0,0 +1 @@
+// backdrop Opacity
$backdropFilters: 'backdrop-blur-none' 'blur(0)','backdrop-blur-sm' 'blur(8rpx)','backdrop-blur-' 'blur(16rpx)','backdrop-blur-md' 'blur(24rpx)','backdrop-blur-lg' 'blur(32rpx)','backdrop-blur-xl' 'blur(48rpx)','backdrop-blur-2xl' 'blur(80rpx)','backdrop-blur-3xl' 'blur(128rpx)';
@each $name, $val in $backdropFilters {	.#{$name} {backdrop-filter: #{$val};}}

uni_modules/jc-tailwind/scss/Filters/Blur.scss

@@ -0,0 +1 @@
+// Blur
$filters: 'blur-none' 'blur(0)','blur-sm' 'blur(8rpx)','blur' 'blur(16rpx)','blur-md' 'blur(24rpx)','blur-lg' 'blur(32rpx)','blur-xl' 'blur(48rpx)','blur-2xl' 'blur(80rpx)','blur-3xl' 'blur(128rpx)';
@each $name, $val in $filters {	.#{$name} {filter: #{$val};}}

uni_modules/jc-tailwind/scss/Filters/DropShadow.scss

@@ -0,0 +1,2 @@
+// Drop Shadow
+$filters: 'drop-shadow-sm' 'drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.05))','drop-shadow' 'drop-shadow(0 1rpx 4rpx rgba(0, 0, 0, 0.1)) drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.06))','drop-shadow-md' 'drop-shadow(0 8rpx 6rpx rgba(0, 0, 0, 0.07)) drop-shadow(0 4rpx 4rpx rgba(0, 0, 0, 0.06))','drop-shadow-lg' 'drop-shadow(0 20rpx 16rpx rgba(0, 0, 0, 0.04)) drop-shadow(0 8rpx 6rpx rgba(0, 0, 0, 0.1))','drop-shadow-xl' 'drop-shadow(0 40rpx 26rpx rgba(0, 0, 0, 0.03)) drop-shadow(0 16rpx 10rpx rgba(0, 0, 0, 0.08))','drop-shadow-2xl' 'drop-shadow(0 50rpx 50rpx rgba(0, 0, 0, 0.15))','drop-shadow-none' 'drop-shadow(0 0 rgba(0,0,0,0))';
@each $name, $val in $filters {	.#{$name} {filter: #{$val};}}

uni_modules/jc-tailwind/scss/Filters/Grayscale.scss

@@ -0,0 +1,4 @@
+
+.grayscale-0	{filter: grayscale(0);}
+.grayscale	{filter: grayscale(100%);}
+.grayscale__90	{filter: grayscale(90%);}

uni_modules/jc-tailwind/scss/Filters/index.scss

@@ -0,0 +1,18 @@
+@import './Blur.scss';
+@import './Brightness.scss';
+@import './Contrast.scss';
+@import './DropShadow.scss';
+@import './Grayscale.scss';
+@import './HueRotate.scss';
+@import './Invert.scss';
+@import './Saturate.scss';
+@import './Sepia.scss';
+@import './BackdropBlur.scss';
+@import './BackdropBrightness.scss';
+@import './BackdropContrast.scss';
+@import './BackdropGrayscale.scss';
+@import './BackdropHueRotate.scss';
+@import './BackdropInvert.scss';
+@import './BackdropOpacity.scss';
+@import './BackdropSaturate.scss';
+@import './BackdropSepia.scss';

uni_modules/jc-tailwind/scss/FlexboxGrid/AlignContent.scss

@@ -0,0 +1,6 @@
+// Align Content
+@each $s, $l in normal normal, center center, start flex-start, end flex-end, between space-between, around space-around, evenly space-evenly, baseline baseline, stretch stretch{
+	.content-#{$s} {
+		align-content: #{$l};
+	}
+}

uni_modules/jc-tailwind/scss/FlexboxGrid/AlignItems.scss

@@ -0,0 +1,6 @@
+// Align Items
+@each $s, $l in start flex-start, end flex-end, center center, baseline baseline, stretch stretch{
+	.items-#{$s} {
+		align-items: #{$l};
+	}
+}

uni_modules/jc-tailwind/scss/FlexboxGrid/AlignSelf.scss

@@ -0,0 +1,6 @@
+// Align Self
+@each $s, $l in auto auto, start flex-start, end flex-end, center center, stretch stretch, baseline baseline{
+	.self-#{$s} {
+		align-self: #{$l};
+	}
+}

uni_modules/jc-tailwind/scss/FlexboxGrid/Flex.scss

@@ -0,0 +1,5 @@
+// Flex
+.flex-1 {flex: 1 1 0%;}
+.flex-auto {flex: 1 1 auto;}
+.flex-initial {flex: 0 1 auto;}
+.flex-none {flex: none;}

uni_modules/jc-tailwind/scss/FlexboxGrid/FlexBasis.scss

@@ -0,0 +1,28 @@
+// Flex Basis 
+// $pxNames: '0' ,'px' ,'0-5' ,'1' ,'1-5' ,'2' ,'2-5' ,'3' ,'3-5' ,'4' ,'5' ,'6' ,'7' ,'8' ,'9' ,'10' ,'11' ,'12' ,'14' ,'16' ,'20' ,'24' ,'28' ,'32' ,'36' ,'40' ,'44' ,'48' ,'52' ,'56' ,'60' ,'64' ,'72' ,'80' ,'96';
+// $pctNames: '1_2' ,'1_3' ,'2_3' ,'1_4' ,'2_4' ,'3_4' ,'1_5' ,'2_5' ,'3_5' ,'4_5' ,'1_6' ,'2_6' ,'3_6' ,'4_6' ,'5_6' ,'1_12' ,'2_12' ,'3_12' ,'4_12' ,'5_12' ,'6_12' ,'7_12' ,'8_12' ,'9_12' ,'10_12' ,'11_12';
+
+// @mixin setPxs($pxs) {
+// 	@each $name in $pxs{
+// 		$varName: --rpx-#{$name};
+// 		@include render($name, $varName);
+// 	}
+// }
+
+// @mixin setPcts($pxs) {
+// 	@each $name in $pxs{
+// 		$varName: --percent-#{$name};
+// 		@include render($name, $varName);
+// 	}
+// }
+
+@mixin render($name, $varName) {
+	.basis-#{$name} {flex-basis: var($varName);}
+}
+
+@include setPxs($pxNames);
+@include setPcts($pctNames);
+
+$morePcts: auto, full;
+@include setPcts($morePcts);
+

uni_modules/jc-tailwind/scss/FlexboxGrid/FlexDirection.scss

@@ -0,0 +1,6 @@
+// Flex Direction
+@each $s, $l in row row, row-reverse row-reverse, col column, col-reverse column-reverse{
+	.flex-#{$s} {
+		flex-direction: #{$l};
+	}
+}

uni_modules/jc-tailwind/scss/FlexboxGrid/FlexGrow.scss

@@ -0,0 +1,3 @@
+// Flex Grow
+.grow {flex-grow: 1;}
+.grow-0 {flex-grow: 0;}

uni_modules/jc-tailwind/scss/FlexboxGrid/FlexShrink.scss

@@ -0,0 +1,3 @@
+// Flex Shrink
+.shrink {flex-shrink: 1;}
+.shrink-0 {flex-shrink: 0;}

uni_modules/jc-tailwind/scss/FlexboxGrid/FlexWrap.scss

@@ -0,0 +1,6 @@
+// Flex Wrap
+@each $s, $l in wrap, wrap-reverse, nowrap{
+	.flex-#{$s} {
+		flex-wrap: #{$s};
+	}
+}