功能：项目配置使用tailwindcss

.eslintrc.json

@@ -3,7 +3,9 @@
     "es6": true,
     "node": true
   },
-  "plugins": ["prettier"],
+  "plugins": [
+    "prettier"
+  ],
   "extends": [
     "airbnb-base",
     "next/core-web-vitals",
@@ -16,15 +18,25 @@
     "prettier/prettier": [
       "error",
       {
-        "singleQuote": true
+        "singleQuote": true,
+        "endOfLine": "auto",
+        "plugins": [
+          "prettier-plugin-tailwindcss"
+        ]
       }
     ]
   },
   "overrides": [
     // Configuration for TypeScript files
     {
-      "files": ["**/*.ts", "**/*.tsx"],
-      "plugins": ["@typescript-eslint", "unused-imports"],
+      "files": [
+        "**/*.ts",
+        "**/*.tsx"
+      ],
+      "plugins": [
+        "@typescript-eslint",
+        "unused-imports"
+      ],
       "extends": [
         "airbnb-typescript",
         "next/core-web-vitals",
@@ -34,22 +46,24 @@
         "project": "./tsconfig.json"
       },
       "rules": {
-        "prettier/prettier": [
-          "error",
-          {
-            "singleQuote": true,
-            "endOfLine": "auto"
-          }
-        ],
-        "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
-        "jsx-a11y/anchor-is-valid": "off", // Next.js use his own internal link system
-        "react/require-default-props": "off", // Allow non-defined react props as undefined
-        "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
-        "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
+        "react/destructuring-assignment": "off",
+        // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
+        "jsx-a11y/anchor-is-valid": "off",
+        // Next.js use his own internal link system
+        "react/require-default-props": "off",
+        // Allow non-defined react props as undefined
+        "react/jsx-props-no-spreading": "off",
+        // _app.tsx uses spread operator and also, react-hook-form
+        "@next/next/no-img-element": "off",
+        // We are currently not using next/image because it isn't supported with SSG mode
         "import/order": [
           "error",
           {
-            "groups": ["builtin", "external", "internal"],
+            "groups": [
+              "builtin",
+              "external",
+              "internal"
+            ],
             "pathGroups": [
               {
                 "pattern": "react",
@@ -57,7 +71,9 @@
                 "position": "before"
               }
             ],
-            "pathGroupsExcludedImportTypes": ["react"],
+            "pathGroupsExcludedImportTypes": [
+              "react"
+            ],
             "newlines-between": "never",
             "alphabetize": {
               "order": "asc",
@@ -66,14 +82,19 @@
           }
         ],
         "@typescript-eslint/no-use-before-define": "off",
-        "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
-        "import/prefer-default-export": "off", // Named export is easier to refactor automatically
-        "class-methods-use-this": "off", // _document.tsx use render method without `this` keyword
+        "@typescript-eslint/comma-dangle": "off",
+        // Avoid conflict rule between Eslint and Prettier
+        "import/prefer-default-export": "off",
+        // Named export is easier to refactor automatically
+        "class-methods-use-this": "off",
+        // _document.tsx use render method without `this` keyword
         "@typescript-eslint/no-unused-vars": "off",
         "unused-imports/no-unused-imports": "warn",
         "unused-imports/no-unused-vars": [
           "warn",
-          { "argsIgnorePattern": "^_" }
+          {
+            "argsIgnorePattern": "^_"
+          }
         ],
         "jsx-a11y/click-events-have-key-events": "off",
         "jsx-a11y/no-static-element-interactions": "off",

package.json

@@ -49,6 +49,7 @@
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
+    "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "eslint": "^8",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -57,8 +58,11 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "postcss": "^8.4.32",
     "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.10",
     "sass": "^1.69.5",
+    "tailwindcss": "^3.4.0",
     "typescript": "^5"
   }
 }

postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/categorySelect/index.tsx

@@ -134,14 +134,18 @@ const CategorySelectView: React.FC<{
       </div>
       <div className="category-list flex-start">
         <div
-          className={`list-item ${secondIndex?.length === 0 && 'item-active'}`}
+          className={`list-item list-none ${
+            secondIndex?.length === 0 && 'item-active'
+          }`}
           onClick={handleAll}
         >
           {allText || '全部商品'}
         </div>
         {list[currentIndex]?.children?.map((i, j) => (
           <div
-            className={`list-item ${secondIndex?.includes(j) && 'item-active'}`}
+            className={`list-item list-none ${
+              secondIndex?.includes(j) && 'item-active'
+            }`}
             key={j}
             onClick={() => handleSecondary(j)}
           >

src/styles/globals.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --default-padding: 0 12rem;
   --max-width: 1100px;

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+
+    // Or if using `src` directory:
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      screens: {
+        xl: '1190px',
+      },
+    },
+  },
+  plugins: [],
+};