update Tailwind CSS config

doc/guide/changelog.md

@@ -1,6 +1,7 @@
 ## 0.0.7
 
 -   多语言包 Context 的值由 `lang` 改为 `STDF_lang`，避免与工程内其他语言包名称冲突。
+-   完善站点快速上手中配置 Tailwind CSS 的说明，关联 [Issues](https://github.com/dufu1991/stdf/issues/1)。[!issue|gavinning|][!contribute|yuedanlabs|]
 
 ## 0.0.6
 

doc/guide/changelog_en.md

@@ -1,6 +1,7 @@
 ## 0.0.7
 
 -   The value of the Context for the multilingual package has been changed from "lang" to "STDF_lang" to avoid conflicts with the names of other language packages within the project.
+-   Improve the instructions for quickly configuring Tailwind CSS in the site, link to [Issues](https://github.com/dufu1991/stdf/issues/1).[!issue|gavinning|][!contribute|yuedanlabs|]
 
 ## 0.0.6
 

doc/guide/quickStart.md

@@ -48,16 +48,40 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-2. 在 tailwind.config.js 文件内添加模板文件。
+2. 在 `tailwind.config.js` 文件内添加模板文件。注意 content 内添加`./node_modules/stdf/src/**/*.svelte`，这是 STDF 的组件位置。其中 theme 的 colors 可以根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/#/guide?nav=color)。
 
 ```javascript
 /** @type {import('tailwindcss').Config} */
-export default {
-    content: ['./index.html', './src/**/*.{js,ts,svelte}'],
+module.exports = {
+    // ...
+    content: ['./index.html', './src/**/*.{html,js,svelte}', './node_modules/stdf/src/**/*.svelte'],
     theme: {
-        extend: {},
+        colors: {
+            primary: '#0B24FB',
+            dark: '#FFC043',
+            purple: '#7356BF',
+            green: '#05944F',
+            orange: '#FF6937',
+            black: '#000000',
+            gray1: '#23262B',
+            gray2: '#2A2B2F',
+            gray3: '#303239',
+            gray4: '#373940',
+            gray5: '#414249',
+            gray6: '#747B84',
+            gray7: '#DADEE3',
+            gray8: '#EBEEF2',
+            gray9: '#F4F6F9',
+            gray10: '#FAFAFB',
+            success: '#11BB8D',
+            warning: '#B95000',
+            error: '#DA1414',
+            info: '#2E5AAC',
+            transparent: 'transparent',
+        },
     },
-    plugins: [],
+    darkMode: 'class',
+    // ...
 };
 ```
 

doc/guide/quickStart_en.md

@@ -48,16 +48,40 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-2. Add the template file to tailwind.config.js.
+2. Add a template file within the `tailwind.config.js` file. Note that `./node_modules/stdf/src/**/*.svelte` is added in content, which is the component location of STDF.The colors of theme can be modified according to its own needs. Reference [STDF Guide - Color](/#/Guide?nav=color).
 
 ```javascript
 /** @type {import('tailwindcss').Config} */
-export default {
-    content: ['./index.html', './src/**/*.{js,ts,svelte}'],
+module.exports = {
+    // ...
+    content: ['./index.html', './src/**/*.{html,js,svelte}', './node_modules/stdf/src/**/*.svelte'],
     theme: {
-        extend: {},
+        colors: {
+            primary: '#0B24FB',
+            dark: '#FFC043',
+            purple: '#7356BF',
+            green: '#05944F',
+            orange: '#FF6937',
+            black: '#000000',
+            gray1: '#23262B',
+            gray2: '#2A2B2F',
+            gray3: '#303239',
+            gray4: '#373940',
+            gray5: '#414249',
+            gray6: '#747B84',
+            gray7: '#DADEE3',
+            gray8: '#EBEEF2',
+            gray9: '#F4F6F9',
+            gray10: '#FAFAFB',
+            success: '#11BB8D',
+            warning: '#B95000',
+            error: '#DA1414',
+            info: '#2E5AAC',
+            transparent: 'transparent',
+        },
     },
-    plugins: [],
+    darkMode: 'class',
+    // ...
 };
 ```
 

doc/guide/theme_en.md

@@ -1,4 +1,4 @@
-Based on the Tailwind configuration file `tailwind.config.js`, configure the theme color system. Please ensure that the following basic colors are configured.Reference [STDF Guide - Color](/#/Guide?nav=color).
+Based on the Tailwind configuration file `tailwind.config.js`, configure the theme color system. Please ensure that the following basic colors are configured. Reference [STDF Guide - Color](/#/Guide?nav=color).
 
 | Color Name  | Description                    | Default Value |
 | ----------- | ------------------------------ | ------------- |