react typescript tailwind setup complete

.eslintrc.js

@@ -0,0 +1,96 @@
+/**
+ * @type {import('@types/eslint').Linter.BaseConfig}
+ */
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  rules: {
+    'block-scoped-var': 2,
+    camelcase: 0,
+    complexity: 2,
+    'consistent-return': 0,
+    curly: 'error',
+    'default-case': 2,
+    'dot-notation': 2,
+    eqeqeq: 2,
+    'eol-last': 0,
+    'jsx-quotes': [2, 'prefer-double'],
+    'no-caller': 2,
+    'no-console': 2,
+    'no-div-regex': 2,
+    'no-dupe-class-members': 2,
+    'no-else-return': 0,
+    'no-eq-null': 2,
+    'no-eval': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-implied-eval': 2,
+    'no-iterator': 2,
+    'no-labels': 2,
+    'no-lone-blocks': 2,
+    'no-loop-func': 2,
+    'no-mixed-operators': 0,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-native-reassign': 2,
+    'no-new': 2,
+    'no-new-func': 2,
+    'no-new-wrappers': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 0,
+    'no-process-env': 0,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-return-assign': 0,
+    'no-script-url': 0,
+    'no-self-compare': 2,
+    'no-sequences': 0,
+    'no-shadow': 0,
+    'no-underscore-dangle': 0,
+    'no-unused-expressions': 0,
+    'no-void': 2,
+    'no-warning-comments': 2,
+    'no-with': 2,
+    quotes: [2, 'single'],
+    radix: 2,
+    'react/jsx-uses-vars': 2,
+    'react/jsx-no-undef': 2,
+    'react/jsx-wrap-multilines': 2,
+    'react/no-did-mount-set-state': 0,
+    'react/no-did-update-set-state': 2,
+    'react/react-in-jsx-scope': 0,
+    'react/prop-types': [
+      2,
+      {
+        ignore: ['children', 'className', 'id', 'style'],
+        skipUndeclared: true,
+      },
+    ],
+    'react/self-closing-comp': 2,
+    'react/jsx-props-no-spreading': 'off',
+    '@typescript-eslint/no-explicit-any': 2,
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    semi: 2,
+    strict: [2, 'never'],
+    'vars-on-top': 0,
+    'wrap-iife': [2, 'inside'],
+    yoda: 2,
+    'no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'after-used',
+        ignoreRestSiblings: false,
+      },
+    ],
+    'react/require-default-props': 2,
+  },
+};

.gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Build files
+build/

.prettierignore

@@ -0,0 +1,9 @@
+/public/build
+
+.cache
+.env
+
+/build/
+/public/build
+/app/tailwind.css
+

.prettierrc.js

@@ -7,6 +7,6 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   arrowParens: 'avoid',
-  printWidth: 120,
+  printWidth: 80,
   endOfLine: 'lf',
 };

package.json

@@ -2,11 +2,16 @@
   "name": "react.gracestack",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
+    "hook": "yarn lint && yarn format:check",
+    "format:check": "prettier --check .",
     "format:write": "prettier --write .",
-    "dev:webpack": "webpack serve",
+    "generate:css": "npx tailwindcss -i ./tailwind.css -o ./src/tailwind.css",
+    "dev:css": "npm run generate:css -- --watch",
+    "dev:serve": "webpack serve ./build/bundle.js",
+    "dev:watch": "webpack --watch",
     "dev": "run-p dev:*"
   },
   "repository": {
@@ -22,11 +27,22 @@
   "devDependencies": {
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
     "@webpack-cli/serve": "^1.7.0",
+    "autoprefixer": "^10.4.7",
     "css-loader": "^6.7.1",
+    "eslint": "^8.20.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-react": "^7.30.1",
+    "html-loader": "^4.1.0",
     "html-webpack-plugin": "^5.5.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.1.6",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0",
@@ -37,5 +53,13 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
-  }
+  },
+  "eslintIgnore": [
+    "/node_modules",
+    "/build",
+    ".eslintrc.js",
+    "tailwind.config.js",
+    "webpack.config.js",
+    "postcss.config.js"
+  ]
 }

postcss.config.js

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

src/app.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-
-export default function App() {
-  return <h1>Hello, world!</h1>;
-}
-// export default App;
+const App = () => (
+  <h1 className="w-full h-full flex justify-center text-emerald-900 items-center overflow-x-hidden bg-stone-500 sm:bg-slate-500 sm:text-lime-500">
+    Hello, world!
+  </h1>
+);
+export default App;

src/index.html

@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>ReactJs | TypeScript | Webpack | Tailwind</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
+import App from './app';
+import './tailwind.css';
 
-import App from './App';
-
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);