Tailwind styling

Co-Authored-By: Magda <[email protected]>
madshoe47 · Feb 23, 2022 · af0e739 · af0e739
1 parent a72903f
commit af0e739
Show file tree

Hide file tree

Showing 7 changed files with 749 additions and 5,639 deletions.
diff --git a/lesson-04/remix-site/.gitignore b/lesson-04/remix-site/.gitignore
@@ -4,3 +4,4 @@ node_modules
 /build
 /public/build
 .env
+/app/tailwind.css
diff --git a/lesson-04/remix-site/app/root.jsx b/lesson-04/remix-site/app/root.jsx
@@ -1,12 +1,9 @@
 import { Link, Outlet, LiveReload, Links, Meta, Scripts } from "remix";
-import globalStylesUrl from "~/styles/global.css";
+import styles from "./tailwind.css";
 
-export const links = () => [
-  {
-    rel: "stylesheet",
-    href: globalStylesUrl,
-  },
-];
+export function links() {
+  return [{ rel: "stylesheet", href: styles }];
+}
 
 export const meta = () => ({
   description: "A recipe blog",
@@ -33,7 +30,7 @@ function Document({ children, title }) {
         <Links />
         <title>{title}</title>
       </head>
-      <body>
+      <body className="bg-stone-800 text-white mx-36 my-8">
         {children}
         {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
         <Scripts />
@@ -45,8 +42,8 @@ function Document({ children, title }) {
 function Layout({ children }) {
   return (
     <>
-      <nav className="navbar">
-        <Link to="/" className="logo">
+      <nav className="flex justify-between items-center mb-8">
+        <Link to="/" className="text-xl">
           Recipes Blog
         </Link>
         <ul className="nav">

diff --git a/lesson-04/remix-site/app/routes/recipes/index.jsx b/lesson-04/remix-site/app/routes/recipes/index.jsx
@@ -1,38 +1,40 @@
 import { Link, useLoaderData } from "remix";
 import db from "~/db/db.server.js";
-import RecipesStylesUrl from "~/styles/Recipes.css";
 
 export async function loader() {
   return db.data.recipes;
 }
 
-export function links() {
-  return [
-    {
-      rel: "stylesheet",
-      href: RecipesStylesUrl,
-    },
-  ];
-}
-
 export default function PostItems() {
   const recipes = useLoaderData();
 
   return (
     <div>
-      <div className="page-header">
-        <h1>Recipes</h1>
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="main-heading">Recipes</h1>
         <Link to="/recipes/new" className="btn">
           New recipe
         </Link>
       </div>
-      <ul className="recipe-list">
+      <ul className="flex flex-row flex-wrap gap-4">
         {recipes.map((recipe) => (
-          <li className="recipe-item" key={recipe.id}>
+          <li
+            className="bg-stone-700 px-8 py-4 rounded-md w-96"
+            key={recipe.id}
+          >
             <Link to={recipe.id}>
-              <h3>{recipe.title}</h3>
-              <img className="img" src={recipe.img} style={{width:"100%", height:"200px", objectFit:"cover", borderRadius:"px"}} ></img>
-              <p className="page-content">Author: {recipe.author}</p>
+              <h3 className="mb-2">{recipe.title}</h3>
+              <img
+                className="img"
+                src={recipe.img}
+                style={{
+                  width: "100%",
+                  height: "200px",
+                  objectFit: "cover",
+                  borderRadius: "px",
+                }}
+              ></img>
+              <p className="mt-2">Author: {recipe.author}</p>
             </Link>
           </li>
         ))}

diff --git a/lesson-04/remix-site/app/styles/tailwind.css b/lesson-04/remix-site/app/styles/tailwind.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn {
+    @apply text-white bg-indigo-700 px-3 py-2 rounded-md;
+  }
+
+  .main-heading {
+    @apply text-4xl font-bold;
+  }
+}