ADD: tailwind.config.js;

Signed-off-by: HarmonySkull <13292121+HarmonySkull@users.noreply.github.com>

Author: Davicho-Dev

package.json

@@ -9,12 +9,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "6"
   },
   "devDependencies": {
+    "@tailwindcss/line-clamp": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.4",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
     "@vitejs/plugin-react": "^2.0.0",
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14",

src/assets/react.svg

@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router-dom'
+
+const CommonLayout = () => {
+	return (
+		<section>
+			<Outlet />
+		</section>
+	)
+}
+
+export default CommonLayout

src/components/layouts/CommonLayout.tsx

@@ -0,0 +1 @@
+export { default as CommonLayout } from './CommonLayout'

src/components/layouts/index.ts

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+
+import reactLogo from './assets/react.svg'
+
+const HomePage = () => {
+	const [count, setCount] = useState(0)
+
+	return (
+		<div className='App'>
+			<div>
+				<a href='https://vitejs.dev' target='_blank' rel='noreferrer'>
+					<img src='/vite.svg' className='logo' alt='Vite logo' />
+				</a>
+				<a href='https://reactjs.org' target='_blank' rel='noreferrer'>
+					<img src={reactLogo} className='logo react' alt='React logo' />
+				</a>
+			</div>
+			<h1>Vite + React</h1>
+			<div className='card'>
+				<button onClick={() => setCount((count) => count + 1)}>
+					count is {count}
+				</button>
+				<p>
+					Edit <code>src/App.tsx</code> and save to test HMR
+				</p>
+			</div>
+			<p className='read-the-docs'>
+				Click on the Vite and React logos to learn more
+			</p>
+		</div>
+	)
+}
+
+export default HomePage

src/components/pages/HomePage.tsx

@@ -0,0 +1 @@
+export { default as HomePage } from './HomePage'

src/components/pages/index.ts

@@ -0,0 +1,16 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+
+import { HomePage } from '../components/pages'
+import { CommonLayout } from '../components/layouts'
+
+const CommonRouter = () => (
+	<BrowserRouter>
+		<Routes>
+			<Route path='/' element={<CommonLayout />}>
+				<Route index element={<HomePage />} />
+			</Route>
+		</Routes>
+	</BrowserRouter>
+)
+
+export default CommonRouter

src/router/CommonRouter.tsx

@@ -0,0 +1,4 @@
+@tailwind base
+@tailwind components
+@tailwind screens
+@tailwind utilities

src/styles/base/_tailwind.sass

@@ -0,0 +1,43 @@
+@import "./base/_tailwind.sass"
+
+#root
+	max-width: 1280px
+	margin: 0 auto
+	padding: 2rem
+	text-align: center
+
+
+.logo
+	height: 6em
+	padding: 1.5em
+	will-change: filter
+
+.logo:hover
+	filter: drop-shadow(0 0 2em #646cffaa)
+
+.logo.react:hover
+	filter: drop-shadow(0 0 2em #61dafbaa)
+
+
+@keyframes logo-spin
+	from
+		transform: rotate(0deg)
+
+	to
+		transform: rotate(360deg)
+
+
+
+@media (prefers-reduced-motion: no-preference)
+a:nth-of-type(2) .logo
+	animation: logo-spin infinite 20s linear
+
+
+
+.card
+	padding: 2em
+
+
+.read-the-docs
+	color: #888
+