apps/web/package.json

@@ -33,8 +33,8 @@
     "@sveltejs/adapter-vercel": "5.6.2",
     "@sveltejs/kit": "2.17.2",
     "@sveltejs/vite-plugin-svelte": "4.0.4",
+    "@tailwindcss/vite": "^4.0.6",
     "@tailwindcss/typography": "0.5.16",
-    "autoprefixer": "10.4.20",
     "eslint": "9.20.1",
     "highlight.js": "11.11.1",
     "prettier": "3.5.1",
@@ -43,7 +43,7 @@
     "svelte": "5.20.1",
     "svelte-check": "4.1.4",
     "svelte-highlight": "7.8.2",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.0",
     "tslib": "2.8.1",
     "typescript": "5.7.3",
     "vite": "5.4.14",

apps/web/src/app.css

@@ -1,6 +1,46 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+
+@source '../../../packages/ui/components*.{html,js,svelte,ts}';
+
+@theme {
+  --grid-template-columns-projects: repeat(auto-fit, minmax(450px, 1fr));
+  --grid-template-columns-project-content: 250px 1fr;
+
+  --font-sans: var(--font-fira-code);
+  --font-sans--0: ui-sans-serif;
+  --font-sans--1: system-ui;
+  --font-sans--2: sans-serif;
+  --font-sans--3: 'Apple Color Emoji';
+  --font-sans--4: 'Segoe UI Emoji';
+  --font-sans--5: 'Segoe UI Symbol';
+  --font-sans--6: 'Noto Color Emoji';
+  --font-sans--length: 7;
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 :root {
   --font-fira-code: 'Fira Code';

apps/web/src/lib/blockContent/BlockContent.svelte

@@ -12,7 +12,7 @@
   let { value }: Props = $props();
 </script>
 
-<div class="prose prose-invert !max-w-md md:!max-w-2xl lg:!max-w-none">
+<div class="prose prose-invert max-w-md! md:max-w-2xl! lg:max-w-none!">
   <PortableText
     {value}
     components={{

apps/web/src/routes/+page.svelte

@@ -20,25 +20,25 @@
   <Section type="dark" className="sm:grid-cols-projects mt-5 sm:grid sm:gap-10">
     {#each data.projects as project}
       <Card>
-        <h3 class="text-lg font-bold">{project.title}</h3>
-        <div
-          class="flex h-full min-h-[390px] flex-col items-center sm:grid sm:grid-cols-projectContent"
-        >
-          <a href={`/project/${project.slug.current}`} class="sm:mr-8">
-            {#if project.featuredImage.asset?.url}
-              <Image
-                src={project.featuredImage.asset?.url}
-                alt={project.featuredImage?.asset?.altText || ''}
-                layout="fullWidth"
-                background={project.featuredImage.asset.metadata?.lqip}
-                class="rounded-md"
-              />
-            {/if}
-          </a>
-          <a href={`/project/${project.slug.current}`} class="my-8">
-            <p>{project.featuredDescription}</p>
-          </a>
-        </div>
+        <a href={`/project/${project.slug.current}`}>
+          <h3 class="text-lg font-bold">{project.title}</h3>
+          <div
+            class="sm:grid-cols-project-content flex h-full min-h-[390px] flex-col items-center sm:grid"
+          >
+            <div class="sm:mr-8">
+              {#if project.featuredImage.asset?.url}
+                <Image
+                  src={project.featuredImage.asset?.url}
+                  alt={project.featuredImage?.asset?.altText || ''}
+                  layout="fullWidth"
+                  background={project.featuredImage.asset.metadata?.lqip}
+                  class="rounded-sm"
+                />
+              {/if}
+            </div>
+            <p class="my-8">{project.featuredDescription}</p>
+          </div>
+        </a>
       </Card>
     {/each}
   </Section>

apps/web/src/routes/project/[slug]/+page.svelte

@@ -20,7 +20,7 @@
           width={800}
           height={600}
           priority={false}
-          class="w-full !object-contain"
+          class="w-full object-contain!"
           layout="fixed"
           src={imageBuilder.image(projectImage.image).fit("max").url().toString()}
           alt={projectImage.alt || ''}

apps/web/vite.config.ts

@@ -1,10 +1,12 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
 import Icons from 'unplugin-icons/vite';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
   clearScreen: false,
   plugins: [
+    tailwindcss(),
     sveltekit(),
     Icons({
       compiler: 'svelte',

packages/ui/components/Card.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
+  import { type Snippet } from 'svelte';
+
   interface Props {
     className?: string;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
   }
 
   let { className = '', children }: Props = $props();
 </script>
 
-<div class={`mb-8 rounded-lg bg-white p-5 text-black shadow sm:mb-0 ${className}`}>
+<div class={`mb-8 rounded-lg bg-white p-5 text-black shadow-sm sm:mb-0 ${className}`}>
   {@render children?.()}
 </div>

packages/ui/components/Section.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import classnames from 'classnames';
+  import type { Snippet } from 'svelte';
 
   type SectionType = 'dark' | 'light';
 
   interface Props {
     type: SectionType;
     className?: string;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
   }
 
   let { type, className = '', children }: Props = $props();