[add] Tailwind CSS & ESLint configuration

.postcssrc

@@ -0,0 +1,5 @@
+{
+   plugins: {
+    "@tailwindcss/postcss": {}
+  },
+}

eslint.config.ts

@@ -0,0 +1,139 @@
+import cspellPlugin from '@cspell/eslint-plugin';
+import eslint from '@eslint/js';
+import html from '@html-eslint/eslint-plugin';
+import stylistic from '@stylistic/eslint-plugin';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import react from 'eslint-plugin-react';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+import tsEslint from 'typescript-eslint';
+import { fileURLToPath } from 'url';
+
+/**
+ * @see{@link https://github.com/typescript-eslint/typescript-eslint/blob/main/eslint.config.mjs}
+ * @see{@link https://github.com/vercel/next.js/issues/71763#issuecomment-2476838298}
+ */
+
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url));
+
+export default tsEslint.config(
+    // register all of the plugins up-front
+    {
+        plugins: {
+            '@typescript-eslint': tsEslint.plugin,
+            react,
+            '@stylistic': stylistic,
+            'simple-import-sort': simpleImportSortPlugin,
+            '@cspell': cspellPlugin
+        }
+    },
+    {
+        // config with just ignores is the replacement for `.eslintignore`
+        ignores: ['**/node_modules/**', 'dist/**', '.parcel-cache/**']
+    },
+
+    // extends ...
+    eslint.configs.recommended,
+    ...tsEslint.configs.recommended,
+
+    // base config
+    {
+        languageOptions: {
+            globals: { ...globals.es2020, ...globals.browser, ...globals.node },
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir,
+                warnOnUnsupportedTypeScriptVersion: false
+            }
+        },
+        rules: {
+            'arrow-body-style': ['error', 'as-needed'],
+            'no-empty-pattern': 'warn',
+            'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
+            'consistent-return': 'warn',
+            'prefer-destructuring': ['error', { object: true, array: true }],
+            // react
+            'react/no-unescaped-entities': 'off',
+            'react/self-closing-comp': [
+                'error',
+                { component: true, html: true }
+            ],
+            'react/jsx-curly-brace-presence': [
+                'error',
+                { props: 'never', children: 'never' }
+            ],
+            'react/jsx-no-target-blank': 'warn',
+            'react/jsx-sort-props': [
+                'error',
+                {
+                    reservedFirst: true,
+                    callbacksLast: true,
+                    noSortAlphabetically: true
+                }
+            ],
+            // typescript
+            '@typescript-eslint/no-unused-vars': 'warn',
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-empty-object-type': 'off',
+            '@typescript-eslint/no-unsafe-declaration-merging': 'warn',
+
+            // @typescript-eslint + eslint, works together
+            '@typescript-eslint/consistent-type-definitions': [
+                'error',
+                'interface'
+            ],
+            'no-restricted-syntax': [
+                'error',
+                {
+                    selector: "TSPropertySignature[key.name='children']",
+                    message:
+                        'Please use PropsWithChildren<T> instead of defining children manually'
+                }
+            ],
+            // stylistic
+            '@stylistic/padding-line-between-statements': [
+                'error',
+                { blankLine: 'always', prev: '*', next: 'return' },
+                { blankLine: 'always', prev: 'directive', next: '*' },
+                { blankLine: 'any', prev: 'directive', next: 'directive' },
+                {
+                    blankLine: 'always',
+                    prev: '*',
+                    next: ['enum', 'interface', 'type']
+                }
+            ],
+
+            // simple-import-sort
+            'simple-import-sort/exports': 'error',
+            'simple-import-sort/imports': 'error',
+            // spellchecker
+            '@cspell/spellchecker': [
+                'warn',
+                {
+                    cspell: {
+                        language: 'en',
+                        dictionaries: [
+                            'typescript',
+                            'node',
+                            'html',
+                            'css',
+                            'bash',
+                            'npm'
+                        ]
+                    }
+                }
+            ]
+        }
+    },
+    {
+        ...html.configs['flat/recommended'],
+        files: ['**/*.html'],
+        rules: {
+            '@html-eslint/sort-attrs': [
+                'error',
+                { priority: ['rel', 'name', 'id', 'type', 'class', 'style'] }
+            ]
+        }
+    },
+    eslintConfigPrettier
+);

package.json

@@ -1,6 +1,6 @@
 {
     "name": "webcell-mobile",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "description": "Mobile App scaffold of WebCell v3, which is a PWA scaffold based on Material Design Web components, with Anti-996 sample data.",
     "author": "[email protected]",
     "homepage": "https://web-cell.dev/WebCell-mobile/",
@@ -12,29 +12,44 @@
         "url": "https://github.com/EasyWebApp/WebCell-mobile/issues"
     },
     "dependencies": {
+        "@tailwindcss/postcss": "^4.0.14",
         "browser-unhandled-rejection": "^1.0.2",
-        "cell-router": "^3.0.1",
-        "dom-renderer": "^2.6.1",
+        "cell-router": "^3.0.3",
+        "dom-renderer": "^2.6.2",
         "koajax": "^3.1.1",
         "mdui": "^2.1.3",
-        "mobx": "^6.13.5",
-        "web-cell": "^3.0.3",
-        "web-utility": "^4.4.2"
+        "mobx": "^6.13.6",
+        "tailwindcss": "^4.0.14",
+        "web-cell": "^3.0.4",
+        "web-utility": "^4.4.3"
     },
     "devDependencies": {
-        "@parcel/config-default": "~2.13.2",
-        "@parcel/packager-raw-url": "~2.13.2",
-        "@parcel/transformer-typescript-tsc": "~2.13.2",
-        "@parcel/transformer-webmanifest": "~2.13.2",
-        "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
-        "@types/node": "^20.17.9",
+        "@cspell/eslint-plugin": "^8.17.5",
+        "@eslint/js": "^9.22.0",
+        "@html-eslint/eslint-plugin": "^0.35.2",
+        "@html-eslint/parser": "^0.35.2",
+        "@parcel/config-default": "~2.13.3",
+        "@parcel/packager-raw-url": "~2.13.3",
+        "@parcel/transformer-typescript-tsc": "~2.13.3",
+        "@parcel/transformer-webmanifest": "~2.13.3",
+        "@stylistic/eslint-plugin": "^4.2.0",
+        "@types/eslint-config-prettier": "^6.11.3",
+        "@types/node": "^22.13.10",
+        "eslint": "^9.22.0",
+        "eslint-config-prettier": "^10.1.1",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
+        "globals": "^16.0.0",
         "husky": "^9.1.7",
-        "lint-staged": "^15.2.11",
-        "parcel": "~2.13.2",
-        "postcss": "^8.4.49",
-        "prettier": "^3.4.2",
+        "jiti": "^2.4.2",
+        "lint-staged": "^15.5.0",
+        "parcel": "~2.13.3",
+        "postcss": "^8.5.3",
+        "prettier": "^3.5.3",
         "prettier-plugin-css-order": "^2.1.2",
-        "typescript": "~5.7.2",
+        "prettier-plugin-tailwindcss": "^0.6.11",
+        "typescript": "~5.8.2",
+        "typescript-eslint": "^8.26.1",
         "workbox-cli": "^7.3.0"
     },
     "prettier": {
@@ -44,11 +59,12 @@
         "tabWidth": 4,
         "plugins": [
             "prettier-plugin-css-order",
-            "@softonus/prettier-plugin-duplicate-remover"
+            "prettier-plugin-tailwindcss"
         ]
     },
     "lint-staged": {
-        "*.{html,md,css,less,json,yml,js,ts,tsx}": "prettier --write"
+        "*.{html,md,css,less,json,yml,js,ts,tsx}": "prettier --write",
+        "*.{css,js,mjs,ts,tsx}": "eslint --fix"
     },
     "scripts": {
         "prepare": "husky",