feature: 🌟 Added TailwingCSS for UI styling

Using preprocessed tailwind seems like an efficient choice BREAKING CHANGE: - Learning tailwind
vanntile · Mar 10, 2021 · 5b27409 · 5b27409
1 parent 52dfa0c
commit 5b27409
Show file tree

Hide file tree

Showing 12 changed files with 995 additions and 38 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -23,6 +23,7 @@
     "import",
     "@typescript-eslint"
   ],
+  "ignorePatterns": "*config.js",
   "rules": {
     "no-console": "warn",
     "no-nested-ternary": "off",

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,5 +4,8 @@
   },
   "material-icon-theme.folders.associations": {
     "types": "typescript"
+  },
+  "tailwindCSS.includeLanguages": {
+    "typescript": "javascript"
   }
 }
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -8,29 +8,35 @@ type Props = {
 }
 
 const Layout = ({ children, title = 'This is the default title' }: Props): JSX.Element => (
-  <div>
+  <div className="flex flex-row flex-wrap px-12 py-16">
     <Head>
       <title>{title}</title>
     </Head>
-    <header>
-      <nav>
+    <header className="w-full pb-8">
+      <nav className="flex flex-row justify-center gap-5">
         <Link href="/">
-          <a>Home</a>
+          <a className="leading-6 underline text-black-600 hover:text-blue-600 visited:text-purple-600 transition-colors">
+            Home
+          </a>
         </Link>{' '}
         |{' '}
         <Link href="/about">
-          <a>About</a>
+          <a className="leading-6 underline text-black-600 hover:text-blue-600 visited:text-purple-600 transition-colors">
+            About
+          </a>
         </Link>{' '}
         |{' '}
         <Link href="/users">
-          <a>Users List</a>
+          <a className="leading-6 underline text-black-600 hover:text-blue-600 visited:text-purple-600 transition-colors">
+            Users List
+          </a>
         </Link>
       </nav>
     </header>
     {children}
-    <footer>
+    <footer className="w-full pt-12 text-center">
       <hr />
-      <span>I'm here to stay (Footer)</span>
+      <span>I'm here to stay</span>
     </footer>
   </div>
 )