use tailwindcss

Author: yini-chen

.prettierrc

@@ -0,0 +1,37 @@
+module.exports = {
+  plugins: ['prettier-plugin-tailwindcss'],
+  // 一行最多 120 字符
+  printWidth: 120,
+  // 使用 2 个空格缩进
+  tabWidth: 2,
+  // 不使用缩进符，而使用空格
+  useTabs: false,
+  // 行尾需要有分号
+  semi: true,
+  // 使用单引号
+  singleQuote: true,
+  // 对象的 key 仅在必要时用引号
+  quoteProps: 'as-needed',
+  // jsx 不使用单引号，而使用双引号
+  jsxSingleQuote: false,
+  // 末尾需要有逗号
+  trailingComma: 'all',
+  // 大括号内的首尾需要空格
+  bracketSpacing: true,
+  // 箭头函数，只有一个参数的时候，也需要括号
+  arrowParens: 'always',
+  // 不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 不需要自动在文件开头插入 @prettier
+  insertPragma: false,
+  // 使用默认的折行标准
+  proseWrap: 'preserve',
+  // 根据显示样式决定 html 要不要折行
+  htmlWhitespaceSensitivity: 'css',
+  // vue 文件中的 script 和 style 内不用缩进
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf
+  endOfLine: 'lf',
+  // 格式化内嵌代码
+  embeddedLanguageFormatting: 'auto',
+};

.prettierrc.js

@@ -0,0 +1,8 @@
+{
+  "editor.formatOnSave": true,
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  }
+}

.vscode/settings.json

@@ -37,15 +37,23 @@
   "version": "0.3.70",
   "repository": "[email protected]:aliyun/alibabacloud-api-vscode-toolkit.git",
   "devDependencies": {
-    "less": "^4.2.0",
-    "@vitejs/plugin-react": "^1.3.2",
-    "vite": "^2.9.7",
+    "@types/blueimp-md5": "^2.7.0",
     "@types/fs-extra": "^5.1.0",
     "@types/lodash": "^4.14.182",
+    "@types/node": "^20",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/vscode": "^1.47.0",
     "@types/vscode-webview": "^1.57.0",
-    "@types/blueimp-md5": "^2.7.0"
+    "@vitejs/plugin-react": "^1.3.2",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.4",
+    "less": "^4.2.0",
+    "postcss": "^8",
+    "prettier": "^3.2.5",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5",
+    "vite": "^2.9.7"
   }
 }

media/package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

media/postcss.config.js

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .pontx-page .next-icon {
   font-family: NextIcon !important;
 }

media/src/main.css

@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

media/tailwind.config.ts

@@ -263,7 +263,8 @@
     "@types/vscode-webview": "^1.57.0",
     "@vercel/ncc": "^0.38.1",
     "@vitejs/plugin-react": "^1.3.2",
-    "prettier": "*",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.13",
     "rimraf": "^3.0.2",
     "typescript": "^5.2.2",
     "vite": "^2.9.7",