feat: upgrade Tailwind CSS v3 to v4 and add Playwright e2e tests

.github/workflows/playwright.yml

@@ -0,0 +1,28 @@
+name: Playwright Tests
+on:
+  pull_request:
+    branches: [main]
+jobs:
+  test:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+      - name: Run Playwright tests
+        run: yarn test:e2e
+        env:
+          BASE_URL: https://hrdevfest.org
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 14

.gitignore

@@ -19,3 +19,7 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+# Playwright
+test-results/
+playwright-report/

astro.config.mjs

@@ -1,12 +1,13 @@
 import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://hrdevfest.org",
-  integrations: [tailwind(), sitemap()],
+  integrations: [sitemap()],
   vite: {
+    plugins: [tailwindcss()],
     server: {
       allowedHosts: ['host.docker.internal'],
     },

e2e/homepage.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Homepage", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
+
+  test("has correct title", async ({ page }) => {
+    await expect(page).toHaveTitle(/Hampton Roads DevFest/);
+  });
+
+  test("hero section is visible with event details", async ({ page }) => {
+    const hero = page.locator(".hero-section");
+    await expect(hero).toBeVisible();
+    await expect(hero.getByText("Hampton Roads DevFest 2026")).toBeVisible();
+    await expect(hero.getByText(/Feb 27th, 2026/)).toBeVisible();
+  });
+
+  test("hero has Buy Tickets button", async ({ page }) => {
+    // Exclude mobile menu links which are hidden
+    await expect(
+      page.locator(".hero-section a.btn-primary:not(.mobile-menu-link)").first()
+    ).toBeVisible();
+  });
+
+  test("sponsors section is visible", async ({ page }) => {
+    await expect(
+      page.getByRole("heading", { name: "Our Sponsors" })
+    ).toBeVisible();
+  });
+
+  test("footer is visible with social links", async ({ page }) => {
+    const footer = page.locator("footer");
+    await expect(footer).toBeVisible();
+    await expect(footer.getByText(/RevolutionVA/)).toBeVisible();
+    await expect(footer.locator("a[href*='x.com/hrdevfest']")).toBeVisible();
+  });
+});

e2e/navigation.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Site Navigation", () => {
+  test("speakers page loads with speaker cards", async ({ page }) => {
+    await page.goto("/speakers");
+    await expect(page).toHaveTitle(/Speakers.*Hampton Roads DevFest/);
+    await expect(
+      page.getByRole("heading", { name: "Featured Speakers" })
+    ).toBeVisible();
+    const speakerCards = page.locator(".card-asymmetric");
+    expect(await speakerCards.count()).toBeGreaterThan(0);
+  });
+
+  test("schedule page loads with schedule items", async ({ page }) => {
+    await page.goto("/schedule");
+    await expect(page).toHaveTitle(/Schedule.*Hampton Roads DevFest/);
+    await expect(
+      page.getByRole("heading", { name: "Schedule" })
+    ).toBeVisible();
+    await expect(page.getByText("8:00 AM")).toBeVisible();
+  });
+
+  test("FAQ page loads with FAQ categories", async ({ page }) => {
+    await page.goto("/faq");
+    await expect(page).toHaveTitle(/FAQ.*Hampton Roads DevFest/);
+    await expect(
+      page.getByRole("heading", { name: "General" })
+    ).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Tickets" })
+    ).toBeVisible();
+  });
+
+  test("2024 archive page loads", async ({ page }) => {
+    await page.goto("/years/2024");
+    await expect(page).toHaveTitle(/Hampton Roads DevFest.*2024/);
+  });
+});

e2e/responsive.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Responsive Layout", () => {
+  test.describe("mobile viewport", () => {
+    test.use({ viewport: { width: 375, height: 667 } });
+
+    test("mobile menu button is visible", async ({ page }) => {
+      await page.goto("/");
+      const menuBtn = page.locator("#mobile-menu-btn");
+      await expect(menuBtn).toBeVisible();
+    });
+
+    test("desktop nav links are hidden on mobile", async ({ page }) => {
+      await page.goto("/");
+      // The desktop nav container should be hidden
+      const desktopNav = page.locator("nav .hidden.md\\:flex");
+      await expect(desktopNav).toBeHidden();
+    });
+
+    test("mobile menu opens and closes", async ({ page }) => {
+      await page.goto("/");
+      const menuBtn = page.locator("#mobile-menu-btn");
+      const mobileMenu = page.locator("#mobile-menu");
+
+      // Menu should start hidden
+      await expect(mobileMenu).toBeHidden();
+
+      // Open menu
+      await menuBtn.click();
+      await expect(mobileMenu).toBeVisible();
+
+      // Close menu
+      await menuBtn.click();
+      await expect(mobileMenu).toBeHidden();
+    });
+  });
+
+  test.describe("desktop viewport", () => {
+    test.use({ viewport: { width: 1280, height: 720 } });
+
+    test("desktop nav links are visible", async ({ page }) => {
+      await page.goto("/");
+      const nav = page.locator("nav");
+      await expect(nav.getByRole("link", { name: "Speakers" })).toBeVisible();
+      await expect(nav.getByRole("link", { name: "Schedule" })).toBeVisible();
+    });
+
+    test("mobile menu button is hidden on desktop", async ({ page }) => {
+      await page.goto("/");
+      const menuBtn = page.locator("#mobile-menu-btn");
+      await expect(menuBtn).toBeHidden();
+    });
+  });
+});

package.json

@@ -10,15 +10,20 @@
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed"
   },
   "dependencies": {
     "@astrojs/check": "0.9.6",
     "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/tailwind": "6.0.2",
+    "@tailwindcss/vite": "^4.0.0",
     "astro": "5.17.2",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.3.3"
   },
+  "devDependencies": {
+    "@playwright/test": "^1.50.0"
+  },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

playwright.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: process.env.BASE_URL || "https://hrdevfest.org",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "desktop-chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "mobile-chromium",
+      use: { ...devices["Pixel 5"] },
+    },
+  ],
+});

src/pages/faq.astro

@@ -1,4 +1,5 @@
 ---
+import "../styles/global.css";
 import headerDots from "../assets/dots/header_dots.svg";
 
 interface FAQItem {

src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+import "../styles/global.css";
 import { Image } from "astro:assets";
 import logo from "../assets/logo.png";
 import logoWhite from "../assets/logo-white.png";

src/pages/schedule.astro

@@ -1,4 +1,5 @@
 ---
+import "../styles/global.css";
 import headerDots from "../assets/dots/header_dots.svg";
 
 interface ScheduleItem {

src/pages/speakers.astro

@@ -1,4 +1,5 @@
 ---
+import "../styles/global.css";
 import { Image } from "astro:assets";
 import logoWhite from "../assets/logo-white.png";
 import headerDots from "../assets/dots/header_dots.svg";

src/pages/years/2024/index.astro

@@ -1,4 +1,5 @@
 ---
+import "../../../styles/global.css";
 import { Image } from "astro:assets";
 import logoWhite from "../../../assets/logo-white.png";
 import header2024 from "../../../assets/header_2024.png";

src/pages/years/2024/schedule.astro

@@ -1,4 +1,5 @@
 ---
+import "../../../styles/global.css";
 import { Image } from "astro:assets";
 import logo from "../../../assets/logo.png";
 import headerImage from "../../../assets/header-image.png";

src/styles/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";