docs(advance): [tailwind-css] add usage documents

Author: akinoccc

packages/docs/.vitepress/cache/deps/_metadata.json

@@ -1,37 +1,37 @@
 {
-  "hash": "54b90a79",
+  "hash": "55e25838",
   "configHash": "3c7637e1",
-  "lockfileHash": "122ab0a0",
-  "browserHash": "ddb6c01e",
+  "lockfileHash": "c539e7c4",
+  "browserHash": "7345505d",
   "optimized": {
     "vue": {
       "src": "../../../../../node_modules/.pnpm/vue@3.4.38_typescript@5.4.5/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "da2889df",
+      "fileHash": "faf410e5",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../../node_modules/.pnpm/@vue+devtools-api@7.0.27_vue@3.4.38_typescript@5.4.5_/node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "f3cb0771",
+      "fileHash": "13c4d3c1",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../../../node_modules/.pnpm/@vueuse+core@10.9.0_vue@3.4.38_typescript@5.4.5_/node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "c99140c1",
+      "fileHash": "8d3aa876",
       "needsInterop": false
     },
     "vue-demi": {
       "src": "../../../../../node_modules/.pnpm/vitepress@1.1.4_@algolia+client-search@4.23.3_@types+node@20.12.7_postcss@8.4.41_search-insights@2.13.0_typescript@5.4.5/node_modules/vitepress/lib/vue-demi.mjs",
       "file": "vue-demi.js",
-      "fileHash": "74931243",
+      "fileHash": "dbaf235e",
       "needsInterop": false
     },
     "stylis": {
       "src": "../../../../../node_modules/.pnpm/stylis@4.3.2/node_modules/stylis/index.js",
       "file": "stylis.js",
-      "fileHash": "d95cdf52",
+      "fileHash": "0d6f93f8",
       "needsInterop": false
     }
   },

packages/docs/.vitepress/en.ts

@@ -57,6 +57,7 @@ function sidebarGuide() {
         { text: 'CSS Mixin', link: 'css-mixin' },
         { text: 'Nest CSS', link: 'nest-css' },
         { text: 'Auto Prefix', link: 'auto-prefix' },
+        { text: 'Tailwind CSS', link: 'tailwind-css' },
       ],
     },
     {

packages/docs/.vitepress/zh.ts

@@ -81,6 +81,7 @@ function sidebarGuide() {
         { text: '样式复用', link: 'css-mixin' },
         { text: '嵌套CSS', link: 'nest-css' },
         { text: 'CSS私有前缀', link: 'auto-prefix' },
+        { text: 'Tailwind CSS', link: 'tailwind-css' },
       ],
     },
     {

packages/docs/guide/advances/tailwind-css.md

@@ -0,0 +1,86 @@
+---
+outline: deep
+---
+
+# Use Tailwind CSS
+
+Starting from version `1.6.0`, `@vue-style-components/core` provides a `tw` function to insert `Tailwind CSS` classes into the `class` attribute of a Vue Component.
+
+> Before staring to use `Tailwind CSS`, you need to install it first. ([How to install Tailwind CSS?](https://tailwindcss.com/docs/installation/using-postcss))
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import styled, { tw } from '@vue-styled-components/core'
+
+const StyledDiv = styled.div`
+  ${tw`w-20 h-20 bg-red-500`}
+`
+</script>
+<template>
+  <StyledDiv />
+</template>
+```
+
+## Use tailwind css conditionally
+
+```vue
+<script setup lang="ts">
+import styled, { tw } from '@vue-styled-components/core'
+
+const StyledDiv = styled('div', { isRed: true })`
+  width: 20px;
+  height: 20px;
+  ${props => props.isRed && tw`bg-red-500`}
+`
+</script>
+<template>
+  <StyledDiv />
+</template>
+```
+
+## Compose Tailwind CSS
+
+```vue
+<script setup lang="ts">
+import styled, { tw } from '@vue-styled-components/core'
+
+const twButton = tw`px-4 py-2 rounded-md`
+
+const StyledSmallButton = styled.div`
+  width: 20px;
+  height: 20px;
+  ${twButton}
+`
+
+const StyledLargeButton = styled.div`
+  width: 40px;
+  height: 20px;
+  ${twButton}
+`
+</script>
+<template>
+  <StyledSmallButton>small button</StyledSmallButton>
+  <StyledLargeButton>large button</StyledLargeButton>
+</template>
+```
+
+## Dynamic Tailwind CSS Classes
+
+```vue
+<script setup lang="ts">
+import styled, { tw } from '@vue-styled-components/core'
+
+const color = 'red'
+
+const StyledDiv = styled('div', { isRed: true })`
+  width: 20px;
+  height: 20px;
+  ${tw`bg-red-500 ${`bg-${color}-500`}`}
+`
+</script>
+<template>
+  <StyledDiv />
+</template>
+```

packages/docs/zh/guide/advances/tailwind-css.md

@@ -0,0 +1,88 @@
+---
+outline: deep
+---
+
+# 使用 Tailwind CSS
+
+`v1.6.0` 版本起支持使用 `Tailwind CSS` 构建样式。
+
+> 开始前请 [安装及配置 `Tailwind CSS`](https://tailwindcss.com/docs/installation/using-postcss)
+
+## 基础使用
+
+`@vue-style-components/core` 提供了 `tw` 函数，用于将 `Tailwind CSS` 的类名插入为 Vue Component 的 `class` 属性。
+
+```vue
+<script setup lang="ts">
+import styled, { tw } from '@vue-styled-components/core'
+
+const StyledDiv = styled.div`
+  ${tw`w-20 h-20 bg-red-500`}
+`
+</script>
+<template>
+  <StyledDiv />
+</template>
+```
+
+## 动态控制
+
+```vue
+<script setup lang="ts">
+import styled, { tw } from '@vue-styled-components/core'
+
+const StyledDiv = styled('div', { isRed: true })`
+  width: 20px;
+  height: 20px;
+  ${props => props.isRed && tw`bg-red-500`}
+`
+</script>
+<template>
+  <StyledDiv />
+</template>
+```
+
+## 抽象为公共样式
+
+```vue
+<script setup lang="ts">
+import styled, { tw } from '@vue-styled-components/core'
+
+const twButton = tw`px-4 py-2 rounded-md`
+
+const StyledSmallButton = styled.div`
+  width: 20px;
+  height: 20px;
+  ${twButton}
+`
+
+const StyledLargeButton = styled.div`
+  width: 40px;
+  height: 20px;
+  ${twButton}
+`
+</script>
+<template>
+  <StyledSmallButton>small button</StyledSmallButton>
+  <StyledLargeButton>large button</StyledLargeButton>
+</template>
+```
+
+## 动态类名
+
+```vue
+<script setup lang="ts">
+import styled, { tw } from '@vue-styled-components/core'
+
+const color = 'red'
+
+const StyledDiv = styled('div', { isRed: true })`
+  width: 20px;
+  height: 20px;
+  ${tw`bg-red-500 ${`bg-${color}-500`}`}
+`
+</script>
+<template>
+  <StyledDiv />
+</template>
+```