working tailwind

2024-02-08 14:52:00 +01:00
parent adf5dde73c
commit d35c246d54
5 changed files with 70 additions and 5 deletions
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -3,15 +3,17 @@ FROM docker.io/oven/bun as base
 # install dependencies into temp directory
 FROM base AS install
 WORKDIR /modules
-COPY package.json bun.lockb /modules/
+COPY package.json bun.lockb ./
+COPY src ./src
 RUN bun install --frozen-lockfile --production
-
+RUN bun run tailwind:build

 # copy production dependencies and source code into final image
 FROM base AS release
 WORKDIR /usr/src/app

 COPY --from=install /modules/node_modules node_modules
+COPY --from=install /modules/public public
 COPY  src .

 # run the app
--- a/frontend/bun.lockb
+++ b/frontend/bun.lockb
--- a/frontend/public/style.css
+++ b/frontend/public/style.css
@@ -543,3 +543,68 @@ video {
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
 }
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.text-lime-500 {
+  --tw-text-opacity: 1;
+  color: rgb(132 204 22 / var(--tw-text-opacity));
+}
+
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity));
+}
+
+.text-sky-500 {
+  --tw-text-opacity: 1;
+  color: rgb(14 165 233 / var(--tw-text-opacity));
+}
+
+.text-violet-500 {
+  --tw-text-opacity: 1;
+  color: rgb(139 92 246 / var(--tw-text-opacity));
+}
--- a/frontend/src/layout.tsx
+++ b/frontend/src/layout.tsx
@@ -3,9 +3,7 @@ const HomeLayout = ({ children }: elements.Children) => `
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://unpkg.com/htmx.org@1.9.5"></script>
-        <script src="https://cdn.tailwindcss.com"></script>
        <link href="/public/style.css" rel="stylesheet" type="text/css" />
-        // not working
        <title>BETH STACK</title>
    </head>
    <body class="h-screen w-screen flex flex-col gap-3 items-center justify-center">
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,7 +1,7 @@
 import type { Config } from 'tailwindcss'

 export default {
-  content: [],
+  content: ["./src/**/*.{html,tsx}"],
  theme: {
    extend: {},
  },