Add CSS and cleanup

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 .DS_Store
-dist
+dist
+coverage
+build

configs/tsconfig.webpack.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../tsconfig",
+	"compilerOptions": {
+		"sourceMap": true
+	},
+	"exclude": [
+		"../**/*.test.tsx",
+		"../node_modules"
+	]
+}

jest.config.ts

@@ -16,7 +16,7 @@ const config: Config = {
     ],
   },
   setupFilesAfterEnv: [
-    "<rootDir>/tests/setupTests.ts"
+    "<rootDir>/configs/setupTests.ts"
   ],
 };
 

package.json

@@ -19,6 +19,7 @@
     "dotenv": "^16.4.4",
     "eslint-plugin-react": "^7.33.2",
     "express": "^4.18.2",
+    "postcss-loader": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0"
@@ -34,6 +35,7 @@
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
+    "autoprefixer": "^10.4.17",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.10.0",
     "eslint": "^8.56.0",
@@ -45,7 +47,9 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "nodemon": "^3.0.3",
+    "postcss": "^8.4.35",
     "style-loader": "^3.3.4",
+    "tailwindcss": "^3.4.1",
     "terser-webpack-plugin": "^5.3.10",
     "ts-jest": "^29.1.2",
     "ts-loader": "^9.5.1",

postcss.config.js

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

src/App/App.tsx

@@ -0,0 +1,15 @@
+
+import  React from "react";
+import Header from './../Header/Header'
+
+type AppProps = {
+  title?: string;
+}; /* use `interface` if exporting so that consumers can extend */
+
+const App = ({ title }: AppProps) => 
+  <div className="elative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
+    <Header/>
+    <h1 className="text-32l font-bold">{title}</h1>
+  </div>;
+
+export default App;

src/Header/Header.tsx

@@ -0,0 +1,19 @@
+
+import  React from "react";
+
+const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+class Header extends React.Component {
+
+  today: number =  new Date().getDay();
+
+  render() {
+    return (
+      <div className="text-sky-500 hover:text-sky-600">
+        Today is: {days[this.today]}
+      </div>
+    );
+  }
+}
+
+export default Header;

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.tsx

@@ -1,14 +1,15 @@
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App";
+import App from "./App/App";
+import "./index.css";
 
 const rootElement = document.getElementById("root") as HTMLElement;
 const root = createRoot(rootElement);
 
 root.render(
   <StrictMode>
-    <App title="Hello world!"/>
+    <App title="We are running react-typescript-seed project."/>
   </StrictMode>
 );
 

tailwind.config.js

@@ -0,0 +1,13 @@
+
+module.exports = {
+  content: [
+    "./public/**/*.html",
+    "./src/**/*.tsx",
+    "./src/**/*.css"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

webpack.config.ts

@@ -12,12 +12,17 @@ const config: Configuration = {
     rules: [
       {
         test: /.tsx?$/,
-        use: "ts-loader",
+        use: [{
+          loader: 'ts-loader',
+          options: {
+            configFile: "configs/tsconfig.webpack.json"
+          }
+        }],
         exclude: /node_modules/,
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"],
+        use: ["style-loader", "css-loader","postcss-loader"],
       },
     ],
   },
@@ -37,6 +42,13 @@ const config: Configuration = {
     new CopyWebpackPlugin({
       patterns: [{ from: "public" }],
     }),
+    new CopyWebpackPlugin({ 
+      patterns: [ 
+        {  
+          from: './public/favicon.ico'
+        },
+      ]
+    })
   ],
 };