chore: add vscode config

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-    "stylelint.vscode-stylelint"
+    "stylelint.vscode-stylelint",
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -7,6 +7,43 @@
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
+  // https://github.com/tailwindlabs/tailwindcss/discussions/5258
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ],
+  "tailwindCSS.experimental.classRegex": [
+    // https://github.com/lukeed/clsx?tab=readme-ov-file#tailwind-support
+    [
+      "clsx\\(([^)]*)\\)",
+      "(?:'|\"|`)([^']*)(?:'|\"|`)"
+    ],
+    [
+      "cn\\(([^)]*)\\)",
+      "(?:'|\"|`)([^']*)(?:'|\"|`)"
+    ],
+    // https://cva.style/docs/getting-started/installation
+    [
+      "cva\\(([^)]*)\\)",
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ],
+    [
+      "cx\\(([^)]*)\\)",
+      "(?:'|\"|`)([^']*)(?:'|\"|`)"
+    ]
+  ],
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ngClass",
+    "class:list",
+    "tw-class",
+    "tw-hover-class",
+    "hover-class"
+  ],
+  "tailwindCSS.includeLanguages": {
+    "wxml": "html",
+    "mpx": "html"
+  },
   // Silent the stylistic rules in you IDE, but still auto fix them
   "eslint.rules.customizations": [
     // close "style/* off"

.vscode/tailwind.json

@@ -0,0 +1,56 @@
+// https://github.com/tailwindlabs/tailwindcss/discussions/5258
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

apps/vite-native-ts/miniprogram/components/IceButton/index.json.ts

@@ -2,6 +2,5 @@ import { defineComponentJson } from 'weapp-vite/json'
 
 export default defineComponentJson({
   component: true,
-  styleIsolation: 'apply-shared',
   usingComponents: {},
 })

apps/vite-native-ts/miniprogram/components/IceButton/index.ts

@@ -1,32 +1,48 @@
 import { cn } from '@weapp-tailwindcss/merge'
 
+const defaultClass = 'weapp-reset-button px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80'
+
 Component({
-  // options: {
-  //   virtualHost: true,
-  // },
+  options: {
+    virtualHost: true,
+    styleIsolation: 'apply-shared',
+  },
+  externalClasses: ['class'],
   properties: {
     class: {
       type: String,
       value: '',
     },
-    myClass: {
+    twClass: {
+      type: String,
+      value: '',
+    },
+    hoverClass: {
+      type: String,
+      value: '',
+    },
+    twHoverClass: {
+      type: String,
+      value: '',
+    },
+    style: {
       type: String,
       value: '',
     },
   },
   data: {
-    customClass: 'weapp-reset-button px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80',
+    mergedClass: defaultClass,
   },
   observers: {
-    myClass(val) {
+    twClass(val) {
       this.setData({
-        customClass: cn(this.data.customClass, val),
+        mergedClass: cn(defaultClass, val),
       })
     },
   },
   lifetimes: {
     ready() {
-      console.log(this.properties)
+      console.log(this.properties, this.data)
     },
   },
   // externalClasses: ['class'],

apps/vite-native-ts/miniprogram/components/IceButton/index.wxml

@@ -1,14 +1,14 @@
-<button class="{{customClass}}">
-  Primary
-</button>
-<view class="flex overflow-hidden bg-white border divide-x rounded-lg dark:bg-gray-900 dark:border-gray-700 dark:divide-gray-700 py-6">
-  <button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
-    Upload
-  </button>
-  <button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
-    Drift
-  </button>
-  <button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
-    View
-  </button>
+<view>
+  <button class="{{mergedClass}}" hover-class="bg-[#123456]">Primary</button>
+  <view class="mt-4 flex overflow-hidden border divide-x rounded-lg dark:bg-gray-900 dark:border-gray-700 dark:divide-gray-700 py-6">
+    <button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
+      Upload
+    </button>
+    <button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
+      Drift
+    </button>
+    <button class="weapp-reset-button px-4 py-2 text-sm font-medium text-gray-600 transition-colors duration-200 sm:text-base sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
+      View
+    </button>
+  </view>
 </view>

apps/vite-native-ts/miniprogram/pages/index/index.wxml

@@ -1,3 +1,3 @@
 <view class="p-4">
-  <IceButton class="bg-[#d72929]" my-class="bg-[orange]"></IceButton>
+  <IceButton class="bg-[#d72929]" tw-class="bg-[orange]" hover-class="bg-[green]" tw-hover-class="bg-[pink]"></IceButton>
 </view>