Add create-stdf

README.md

@@ -68,7 +68,21 @@ import { Button } from 'stdf';
 <Button>默认</Button>
 ```
 
-😓 无工程？用 Vite 示例创建工程，参考 [Vite 文档](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project)。并配置 Tailwind CSS，参考 [Tailwind CSS 文档](https://tailwindcss.com/docs/guides/vite)。
+## 😓 无工程？创建工程
+
+可以尝试使用 `create-stdf` 快速创建工程。（beta 版本，可能存在问题）
+
+```bash
+pnpm create stdf@latest
+# or
+npm create stdf@latest
+# or
+npm init stdf@latest
+# or
+npx create-stdf@latest
+```
+
+或者自行创建 Vite 工程，并配置 Tailwind CSS 和 STDF 使用到的配置。参考 [Vite](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project) & [Tailwind CSS](https://tailwindcss.com/docs/guides/vite) & [STDF](https://stdf.design/#/guide)。
 
 # 预览
 

README_en.md

@@ -66,7 +66,21 @@ import { Button } from 'stdf';
 <Button>Default</Button>
 ```
 
-😓 No project? Create a project with Vite and reference the [Vite documentation](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) and the [Tailwind CSS documentation](https://tailwindcss.com/docs/guides/vite) for CSS configuration.
+## 😓 No project? Create one!
+
+You can try using `create-stdf` to quickly create a project. (beta version, may have issues)
+
+```bash
+pnpm create stdf@latest
+# or
+npm create stdf@latest
+# or
+npm init stdf@latest
+# or
+npx create-stdf@latest
+```
+
+Alternatively, you can create a Vite project and configure it to use Tailwind CSS and the configurations used by STDF. Refer to [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) & [Tailwind CSS](https://tailwindcss.com/docs/guides/vite) & [STDF](https://stdf.design/#/guide) for more information.
 
 # Preview
 

packages/create-stdf/README.md

@@ -0,0 +1,19 @@
+# create-stdf
+
+A CLI for creating new [STDF](https://stdf.design) projects. Just run...
+
+```bash
+npm create create-stdf@latest
+```
+
+...and follow the prompts.
+
+# Introduction
+
+This is a template using Vite + Svelte + TailwindCSS + STDF. It is based on [create-vite](https://www.npmjs.com/package/create-vite) and add base TailwindCSS configuration, and STDF configuration.
+
+Omit the separate configuration of TailwindCSS and STDF, and use the template to quickly create a project that can be used directly.
+
+# License
+
+This project is licensed under the [MIT License](https://github.com/dufu1991/stdf/blob/main/LICENSE). Feel free to enjoy and contribute to this open-source project.

packages/create-stdf/bin.js

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs';
+import fsExtra from 'fs-extra';
+import * as p from '@clack/prompts';
+import { bold, cyan, grey, red, blue } from 'kleur/colors';
+import * as langAll from './lang/index.mjs';
+
+const { version } = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url), 'utf-8'));
+
+console.log(`
+${grey(`create-stdf version ${version}
+`)}`);
+
+const spinner = p.spinner();
+
+p.intro('Welcome to use STDF!');
+
+// 选择一种语言
+// Select a language
+const languageType = await p.select({
+    message: bold('Please select your preferred language(请选择你习惯的语言)'),
+    options: [
+        { value: 'en_US', label: 'English' },
+        { value: 'zh_CN', label: '简体中文' },
+    ],
+});
+const lang = langAll[languageType] || langAll['en_US'];
+
+if (p.isCancel(languageType)) {
+    p.cancel(red('⛔ ') + lang.oc);
+    process.exit(0);
+}
+
+const templateOptions = [
+    { value: 'vt', label: 'Vite + Tailwind' },
+    { value: 'vu', label: 'Vite + UnoCSS' },
+    { value: 'skt', label: `SvelteKit + Tailwind(${lang.hnay})` },
+    { value: 'sku', label: `SvelteKit + UnoCSS(${lang.hnay})` },
+    { value: 'vtt', label: `Vite + Tailwind + TypeScript(${lang.hnay})` },
+    { value: 'vut', label: `Vite + UnoCSS+TypeScript(${lang.hnay})` },
+    { value: 'sktt', label: `SvelteKit + Tailwind + TypeScript(${lang.hnay})` },
+    { value: 'skut', label: `SvelteKit + UnoCSS + TypeScript(${lang.hnay})` },
+];
+
+//  选择一个模板
+// Select a template
+let template = await p.select({
+    message: bold(lang.psat),
+    options: templateOptions,
+});
+
+// 直到选择的 template 是 vt 或者 vu 为止，否则一直重新选择
+// Until the selected template is vt or vu, otherwise keep reselecting
+while (template !== 'vt' && template !== 'vu') {
+    if (p.isCancel(template)) {
+        p.cancel(red('⛔ ') + lang.oc);
+        process.exit(0);
+    }
+
+    p.intro(red(templateOptions.find(item => item.value === template).label + ' ' + lang.pca));
+    template = await p.select({
+        message: bold(lang.psat),
+        options: templateOptions,
+    });
+}
+
+if (p.isCancel(template)) {
+    p.cancel(red('⛔ ') + lang.oc);
+    process.exit(0);
+}
+
+// 输入项目名称
+// Enter the project name
+let projectName = await p.text({
+    message: bold(lang.pn),
+    initialValue: 'my-stdf-app',
+    validate: value => {
+        if (!value) {
+            // 判断是否为空，提示 “项目名称不能为空”
+            // Determine whether it is empty, prompt "Project name cannot be empty"
+            return lang.pncbne;
+        }
+        if (fs.existsSync(value)) {
+            // 判断是否已存在，提示 “项目名称已存在”
+            // Determine whether it already exists, prompt "Project name already exists"
+            return lang.pane;
+        }
+    },
+});
+
+if (p.isCancel(projectName)) {
+    p.cancel(red('⛔ ') + lang.oc);
+    process.exit(0);
+}
+
+// 项目目录
+// Project directory
+const projectDir = `${process.cwd()}/${projectName}`;
+
+const templatePaths = [
+    { template: 'vt', path: './templates/vite-tailwind' },
+    { template: 'vu', path: './templates/vite-uno' },
+    { template: 'skt', path: './templates/sveltekit-tailwind' },
+    { template: 'sku', path: './templates/sveltekit-uno' },
+    { template: 'vtt', path: './templates/vite-tailwind-typescript' },
+    { template: 'vut', path: './templates/vite-uno-typescript' },
+    { template: 'sktt', path: './templates/sveltekit-tailwind-typescript' },
+    { template: 'skut', path: './templates/sveltekit-uno-typescript' },
+];
+
+spinner.start('🚀 ' + lang.cfsing);
+
+// 根据 template 的值，复制对应目录下的所有文件到当前目录
+// According to the value of template, copy all files under the corresponding directory to the current directory
+templatePaths.forEach(item => {
+    if (item.template === template) {
+        fs.mkdirSync(projectDir);
+        // 获取模板目录的绝对路径
+        // Get the absolute path of the template directory
+        const filePath = new URL(item.path, import.meta.url).pathname;
+        // 将 filePath 目录下的所有文件复制到 projectDir 目录下
+        // Copy all files under the filePath directory to the projectDir directory
+        fsExtra.copySync(filePath, projectDir, {
+            filter: (src, dest) => {
+                return !src.endsWith('/pnpm-lock.yaml');
+            },
+        });
+    }
+});
+
+spinner.stop();
+console.log(`🎉 ${lang.pcsucc}
+`);
+
+// 读取 package.json 文件，获得 vite svelte tailwind stdf 的版本号
+// Read the package.json file to get the version number of vite svelte tailwind stdf
+const packageJson = JSON.parse(fs.readFileSync(`${projectDir}/package.json`, 'utf-8'));
+const versions = {
+    vite: packageJson.devDependencies.vite,
+    svelte: packageJson.devDependencies.svelte,
+    tailwindcss: packageJson.devDependencies.tailwindcss,
+    stdf: packageJson.devDependencies.stdf,
+};
+
+// 显示版本号
+// Display version number
+console.log(
+    `📦 ${bold('Vite:')} ${cyan(versions.vite)} ${bold('Svelte:')} ${cyan(versions.svelte)} ${bold('Tailwind:')} ${cyan(
+        versions.tailwindcss
+    )} ${bold('STDF:')} ${cyan(versions.stdf)}
+    `
+);
+
+// 显示提示信息
+// Display prompt information
+console.log(
+    `👉 ${bold(lang.tgs)}
+
+    ${blue(`cd ${projectName}`)}
+    ${blue('pnpm i or npm i or yarn')}
+    ${blue('npm run dev')}
+    `
+);
+
+// 显示配置主题色
+// Display configuration theme color
+console.log(
+    `🎨 ${bold(lang.pcyt)}
+    `
+);

packages/create-stdf/lang/index.mjs

@@ -0,0 +1,27 @@
+export const en_US = {
+    hnay: 'Has not adapted yet',
+    pn: 'Please enter the project name',
+    pncbne: 'Project name cannot be empty',
+    pane: 'Project name already exists',
+    psat: 'Please select a template',
+    oc: 'Operation cancelled',
+    pca: 'Please choose again',
+    cfsing: 'Creating file...',
+    pcsucc: 'Project created successfully',
+    tgs: 'To get started:',
+    pcyt: 'Please configure the theme color in the tailwind.config.js file',
+};
+
+export const zh_CN = {
+    hnay: '暂未适配',
+    pn: '请输入项目名称',
+    pncbne: '项目名称不能为空',
+    pane: '项目名称已存在',
+    psat: '请选择一个模板',
+    oc: '操作已取消',
+    pca: '请重新选择',
+    cfsing: '正在创建文件...',
+    pcsucc: '项目创建成功',
+    tgs: '开始：',
+    pcyt: '请到 tailwind.config.js 文件内配置主题色',
+};

packages/create-stdf/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "create-stdf",
+    "version": "0.0.1",
+    "description": "A CLI for creating new STDF projects",
+    "main": "./index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "bin": "./bin.js",
+    "dependencies": {
+        "@clack/prompts": "^0.6.3",
+        "kleur": "^4.1.5",
+        "fs-extra": "^11.1.1"
+    },
+    "keywords": [
+        "svelte",
+        "tailwind",
+        "stdf",
+        "cli",
+        "mobile"
+    ],
+    "author": "dufu1991",
+    "license": "MIT",
+    "type": "module"
+}

packages/create-stdf/templates/vite-tailwind/README.md

@@ -0,0 +1,13 @@
+# Vite + Svelte + Tailwind + STDF
+
+This template should help get you started developing with Svelte + Tailwind + STDF in Vite.
+
+## Recommended IDE Setup
+
+-   [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) + [STDF](https://stdf.design) .
+
+-   [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [STDF](https://stdf.design) .
+
+## More Info
+
+For more information about quickly create a new project, see the STDF [Quick start](https://stdf.design/#/guide) guide.

packages/create-stdf/templates/vite-tailwind/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+  <title>Vite + Svelte</title>
+</head>
+
+<body class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>

packages/create-stdf/templates/vite-tailwind/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "my-stdf-app",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "devDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^2.4.2",
+        "autoprefixer": "^10.4.14",
+        "postcss": "^8.4.27",
+        "svelte": "^4.1.1",
+        "stdf": "^0.2.0",
+        "tailwindcss": "^3.3.3",
+        "vite": "^4.4.6"
+    }
+}

packages/create-stdf/templates/vite-tailwind/postcss.config.js

@@ -0,0 +1,7 @@
+import tailwind from 'tailwindcss';
+import tailwindConfig from './tailwind.config.js';
+import autoprefixer from 'autoprefixer';
+
+export default {
+    plugins: [tailwind(tailwindConfig), autoprefixer],
+};

packages/create-stdf/templates/vite-tailwind/src/App.svelte

@@ -0,0 +1,90 @@
+<script>
+    import { setContext } from 'svelte';
+    import { Button, Cell } from 'stdf';
+    import Counter from './lib/Counter.svelte';
+
+    import viteLogo from './assets/vite.svg';
+    import svelteLogo from './assets/svelte.svg';
+    import tailwindLogo from './assets/tailwindcss.svg';
+
+    //切换亮暗模式(toggle light or dark mode)
+    let theme = 'light';
+    const toggleModeFun = () => {
+        if (theme === 'dark') {
+            // 切换到(light switch to light)
+            theme = 'light';
+            document.documentElement.classList.remove('dark');
+        } else {
+            // 切换到(dark switch to dark)
+            theme = 'dark';
+            document.documentElement.classList.add('dark');
+        }
+    };
+
+    // 设置语言(setting language)
+    let lang = 'zh_CN';
+    $: isZh = lang === 'zh_CN';
+    const toggleLangFun = () => {
+        lang = isZh ? 'en_US' : 'zh_CN';
+        setContext('STDF_lang', lang);
+    };
+
+    // 进度条(percent)
+    let percent = 20;
+    const reduceFunc = () => {
+        percent > 0 && (percent -= 10);
+    };
+    const increaseFunc = () => {
+        percent < 100 && (percent += 10);
+    };
+</script>
+
+<main>
+    <div class="flex justify-center items-center text-center gap-4 pt-20">
+        <a class="flex flex-col items-center w-10" href="https://vitejs.dev" target="_blank" rel="noreferrer">
+            <img src={viteLogo} alt="Vite Logo" />
+        </a>+
+        <a class="flex flex-col items-center w-10" href="https://svelte.dev" target="_blank" rel="noreferrer">
+            <img src={svelteLogo} alt="Svelte Logo" />
+        </a>+
+        <a class="flex flex-col items-center w-10" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
+            <img src={tailwindLogo} alt="Tailwind Logo" />
+        </a>+
+        <a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
+            <svg viewBox="0 0 90 80" fill="currentColor">
+                <path
+                    class="text-primary dark:text-dark"
+                    d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
+                />
+                <path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
+            </svg>
+        </a>
+    </div>
+    <div class="text-center my-8 text-xs">
+        {#if isZh}
+            <p>这是一个使用 Vite + Svelte + Tailwind + STDF 构建的模板。</p>
+            <p class="mt-2">点击上方 LOGO 了解更多。</p>
+        {:else}
+            <p>This is a template using Vite + Svelte + TailwindCSS + STDF.</p>
+            <p class="mt-2">Click the logo above to learn more.</p>
+        {/if}
+    </div>
+    <div class="my-8">
+        <Cell title={isZh ? '英文' : 'English'} right={{ type: 'switch' }} on:click={toggleLangFun} />
+    </div>
+    <div class="my-8">
+        <Counter bind:percent />
+    </div>
+    <div class="my-8">
+        <Button heightIn="0" group fill="lineTheme">
+            <div class="flex divide-x">
+                <div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
+                <div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
+                <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
+            </div>
+        </Button>
+    </div>
+    <div class="my-8">
+        <Button on:click={toggleModeFun}>{isZh ? '亮暗模式' : 'Light or dark mode'}</Button>
+    </div>
+</main>

packages/create-stdf/templates/vite-tailwind/src/app.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+    -webkit-tap-highlight-color: transparent;
+}

packages/create-stdf/templates/vite-tailwind/src/assets/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

packages/create-stdf/templates/vite-tailwind/src/assets/tailwindcss.svg

@@ -0,0 +1,6 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <title>Tailwind CSS</title>
+    <path
+    fill="#06B6D4"
+        d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" />
+</svg>

packages/create-stdf/templates/vite-tailwind/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

packages/create-stdf/templates/vite-tailwind/src/lib/Counter.svelte

@@ -0,0 +1,9 @@
+<script>
+    import { Progress } from 'stdf';
+
+    export let percent = 20;
+</script>
+
+<div class="p-4">
+    <Progress {percent} />
+</div>

packages/create-stdf/templates/vite-tailwind/src/main.js

@@ -0,0 +1,15 @@
+import './app.css';
+import App from './App.svelte';
+
+const app = new App({
+    target: document.getElementById('app'),
+});
+
+//解决ios不支持按钮:active伪类
+// Solve the problem that ios does not support the button: active pseudo class
+document.body.addEventListener('touchstart', function () {
+    //...空函数即可
+    // ... Empty function is OK
+});
+
+export default app;

packages/create-stdf/templates/vite-tailwind/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+    // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+    // for more information about preprocessors
+    preprocess: vitePreprocess(),
+};

packages/create-stdf/templates/vite-tailwind/tailwind.config.js

@@ -0,0 +1,46 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/src/**/*.svelte'],
+    theme: {
+        colors: {
+            // 主题色
+            // Theme Color
+            primary: '#0B24FB',
+            dark: '#FFC043',
+            blue: '#0B24FB', // primary 别名 alias
+            yellow: '#FFC043', // dark 别名 alias
+
+            // 扩展色
+            // Extended Color
+            purple: '#7356BF',
+            green: '#05944F',
+            orange: '#FF6937',
+
+            // 功能色
+            // Functional Color
+            success: '#11BB8D',
+            warning: '#B95000',
+            error: '#DA1414',
+            info: '#2E5AAC',
+
+            // 中性色
+            // Neutral Color
+            black: '#000000',
+            white: '#fff',
+            gray1: '#23262B',
+            gray2: '#2A2B2F',
+            gray3: '#303239',
+            gray4: '#373940',
+            gray5: '#414249',
+            gray6: '#747B84',
+            gray7: '#DADEE3',
+            gray8: '#EBEEF2',
+            gray9: '#F4F6F9',
+            gray10: '#FAFAFB',
+            transparent: 'transparent',
+        },
+        extend: {},
+    },
+    darkMode: 'class',
+    plugins: [],
+};

packages/create-stdf/templates/vite-tailwind/vite.config.js

@@ -0,0 +1,25 @@
+import postcss from './postcss.config.js';
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        svelte({
+            onwarn(warning, defaultHandler) {
+                const ignoredWarnings = [
+                    'a11y-distracting-elements',
+                    'a11y-no-static-element-interactions',
+                    'a11y-click-events-have-key-events',
+                ];
+                const { code } = warning;
+                // don't warn on <marquee> elements, cos they're cool
+                if (ignoredWarnings.includes(code)) return;
+
+                // handle all other warnings normally
+                defaultHandler(warning);
+            },
+        }),
+    ],
+    css: { postcss },
+});