Added tailwind style

.github/workflows/webpack.yml

@@ -0,0 +1,28 @@
+name: NodeJS with Webpack
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Build
+      run: |
+        npm install
+        npx webpack

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

src/App.css

@@ -1,6 +1,6 @@
 button {
     cursor: pointer;
-    color: #fff;
+    color: #fff !important;
     font-weight: bold;
     display: flex;
     justify-content: center;

src/App.jsx

@@ -20,7 +20,7 @@ function App({ name }) {
     return (
         <div>
             <div style={styles.div}>
-                <h1 style={styles.h1}>Hello {name}, Welcome to React Router Modal Site</h1>
+                <h1 style={styles.h1} className='text-3xl font-bold underline'>Hello {name}, Welcome to React Router Modal Site</h1>
                 <br />
                 <h2 style={{ color: 'wheat' }}>Nice website</h2>
             </div>

src/Router.jsx

@@ -4,7 +4,6 @@ import RouterModalProvider, { SwitchRoutes, RouteModal, routerFade, routerSlideL
 import App from './App'
 import Login from './pages/Login'
 
-
 // Render routes to Page
 const Router = () => {
     return (

src/components/styles/tailwind.css

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

src/index.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 import { createRoot } from 'react-dom/client'
 import Router from './Router'
 import reportWebVitals from './reportWebVitals';
+
 import './index.css'
+import './components/styles/tailwind.css'
 
 const Root = createRoot(document.getElementById('root'))
 Root.render(

src/pages/Login.jsx

@@ -19,7 +19,7 @@ function Login() {
     return (
         <div>
             <div style={styles.div}>
-                <h1 style={styles.h1}>Welcome Back!</h1>
+                <h1 style={styles.h1} className='text-2xl font-bold underline'>Welcome Back!</h1>
             </div>
 
             <br />

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}