add fonts and initialized tailwindcss

index.html

@@ -13,7 +13,7 @@
 		<meta name="color-scheme" content="dark light" />
 		<title>Shop'n Go</title>
 		<script type="module" src="/src/index.jsx" async></script>
-
+		<link rel="icon" href="./public/noun-shopping-cart-3972679.svg" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link

package.json

@@ -8,11 +8,14 @@
 	},
 	"dependencies": {
 		"@the-collab-lab/shopping-list-utils": "^2.2.0",
+		"autoprefixer": "^10.4.20",
 		"firebase": "^10.12.5",
+		"postcss": "^8.4.47",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-icons": "^5.3.0",
-		"react-router-dom": "^6.26.0"
+		"react-router-dom": "^6.26.0",
+		"tailwindcss": "^3.4.13"
 	},
 	"devDependencies": {
 		"@nabla/vite-plugin-eslint": "^2.0.4",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

public/noun-shopping-cart-3972679.ico

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1280" x="0px" y="0px"><title>cart</title><path d="M949.647 246.235c-12.176-15-30.176-23.647-49.412-23.647h-688.765l-6.176-44.118c-4.412-31.235-31.412-54.706-63-54.706h-53.824c-15.529 0-28.235 12.706-28.235 28.235s12.706 28.235 28.235 28.235h54c3.529 0 6.529 2.647 7.059 6l76.059 546.353c4.412 31.235 31.412 54.706 63 54.706h30.529c-3.176 8.824-4.941 18.353-4.941 28.235 0 46.765 37.941 84.706 84.706 84.706s84.706-37.941 84.706-84.706c0-9.882-1.765-19.412-4.941-28.235h150.882c-3.176 8.824-4.941 18.353-4.941 28.235 0 46.765 37.941 84.706 84.706 84.706s84.706-37.941 84.706-84.706c0-9.882-1.765-19.412-4.941-28.235h61.765c15.529 0 28.235-12.706 28.235-28.235s-12.706-28.235-28.235-28.235h-562.235c-3.529 0-6.529-2.647-7.059-6l-7.059-50.471h556.059c29.824 0 55.941-21.176 62.118-50.294l69.529-324.706c4.235-18.706-0.353-38.118-12.529-53.118v0z"/><text x="0" y="1039" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by emil robinson</text><text x="0" y="1044" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
 	--color-black: hsla(220, 13%, 18%, 1);
 	--color-gray-dark: hsla(220, 13%, 25%, 1);
@@ -23,7 +27,7 @@
 	font-size: 62.5%;
 }
 
-.gloria-hallelujah-regular {
+/* .gloria-hallelujah-regular {
 	font-family: 'Gloria Hallelujah', cursive;
 	font-weight: 400;
 	font-style: normal;
@@ -43,7 +47,7 @@ h1 {
 	font-family: 'Gloria Hallelujah', cursive;
 	font-weight: 400;
 	font-style: normal;
-}
+} */
 
 @media screen and (prefers-color-scheme: light) {
 	:root {
@@ -72,7 +76,7 @@ body {
 	color: var(--color-text);
 	font-family: 'Raleway', sans-serif;
 	font-optical-sizing: auto;
-	/* font-family:
+	font-family:
 		-apple-system,
 		BlinkMacSystemFont,
 		avenir next,
@@ -84,7 +88,7 @@ body {
 		roboto,
 		noto,
 		arial,
-		sans-serif; */
+		sans-serif;
 	font-size: 1.8rem;
 	/** Make sure the app fills the height of the screen. */
 	height: 100dvh;
@@ -123,3 +127,7 @@ code {
 :root.theme-light code {
 	--color-bg: var(--color-gray-light);
 }
+
+/* @import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities'; */

src/views/Layout.jsx

@@ -15,7 +15,7 @@ export function Layout() {
 					<Link to="/">
 						<h1>
 							{' '}
-							<FaShoppingCart /> Shop&aposn Go
+							<FaShoppingCart /> Shop&apos;n Go
 						</h1>
 					</Link>
 					{!!user ? (

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: [],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};