feat: add tailwind and design system

apps/frontend/package.json

@@ -12,18 +12,21 @@
   },
   "dependencies": {
     "@repo/logger": "*",
+    "@repo/ui": "*",
     "next": "^14.0.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@repo/ui": "*"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.4",
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
-    "@repo/eslint-config": "*",
-    "@repo/typescript-config": "*",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   }
 }

apps/frontend/postcss.config.js

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

apps/frontend/src/app/page.tsx

@@ -1,30 +1,11 @@
-import { log } from "@repo/logger";
-import { CounterButton, Link } from "@repo/ui";
-
 export const metadata = {
-  title: "Store | Kitchen Sink",
-};
+  title: 'Store | Kitchen Sink',
+}
 
 export default function Store(): JSX.Element {
-  log("Hey! This is the Store page.");
-
   return (
-    <div className="container">
-      <h1 className="title">
-        Store <br />
-        <span>Kitchen Sink</span>
-      </h1>
-      <CounterButton />
-      <p className="description">
-        Built With{" "}
-        <Link href="https://turbo.build/repo" newTab>
-          Turborepo
-        </Link>
-        {" & "}
-        <Link href="https://nextjs.org/" newTab>
-          Next.js
-        </Link>
-      </p>
+    <div>
+      <h1 className=' text-primary'>Hello, World!</h1>
     </div>
-  );
+  )
 }

apps/frontend/src/app/styles.css

@@ -1,55 +1,3 @@
-html {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-tap-highlight-color: transparent;
-  line-height: 1.5;
-  tab-size: 4;
-}
-
-body {
-  margin: 0;
-}
-
-.container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0 16px;
-  text-align: center;
-}
-
-.title {
-  font-size: 3rem;
-  font-weight: 700;
-  margin: 0;
-}
-
-.title span {
-  display: inline-block;
-  background-image: linear-gradient(to right, #3b82f6, #ef4444);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-.description {
-  color: #9ca3af;
-  font-weight: 500;
-}
-
-.description a {
-  color: #3b82f6;
-  text-decoration: none;
-}
-
-.description a:hover {
-  text-decoration: underline;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/frontend/tailwind.config.js

@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+
+    // Or if using `src` directory:
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'hsl(180, 29%, 50%)',
+        secondary: {
+          DEFAULT: 'hsl(180, 14%, 20%)',
+          light: 'hsl(180, 8%, 52%)',
+        },
+        tertiary: 'hsl(180, 31%, 95%)',
+        accent: 'hsl(180, 52%, 96%)',
+        warning: 'hsl(34, 97%, 64%)',
+        danger: 'hsl(0, 100%, 63%)',
+      },
+    },
+  },
+  plugins: [],
+}