chore: replace tailwind with css modules

.eslintrc.json

@@ -1,23 +1,13 @@
 {
   "$schema": "https://json.schemastore.org/eslintrc",
   "root": true,
-  "extends": [
-    "next/core-web-vitals",
-    "prettier",
-    "plugin:tailwindcss/recommended"
-  ],
-  "plugins": ["tailwindcss"],
+  "extends": ["next/core-web-vitals", "prettier"],
   "rules": {
     "@next/next/no-html-link-for-pages": "off",
     "react/jsx-key": "off",
-    "tailwindcss/no-custom-classname": "off",
     "@next/next/no-img-element": "off"
   },
   "settings": {
-    "tailwindcss": {
-      "callees": ["cn"],
-      "config": "tailwind.config.js"
-    },
     "next": {
       "rootDir": ["./"]
     }

app/attack/page.module.css

@@ -0,0 +1,56 @@
+.title {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 800;
+  line-height: 1.25;
+  letter-spacing: -0.05em;
+}
+
+@media (min-width: 768px) {
+  .title {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
+
+.description {
+  max-width: 700px;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.subdescription {
+  max-width: 700px;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: hsl(var(--secondary-foreground));
+}
+
+.sectionHeading {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
+.secondaryText {
+  color: hsl(var(--secondary-foreground));
+}
+
+.link {
+  font-weight: 700;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+.link:hover {
+  text-decoration-line: underline;
+}
+
+.codeExample {
+  padding: 1rem;
+}
+
+.explanation {
+  max-width: 700px;
+  color: hsl(var(--secondary-foreground));
+}

app/attack/page.tsx

@@ -1,7 +1,8 @@
 import VisitDashboard from "@/components/compositions/VisitDashboard";
 import WhatNext from "@/components/compositions/WhatNext";
 import Divider from "@/components/elements/Divider";
-import styles from "@/components/elements/PageShared.module.scss";
+import sharedStyles from "@/components/elements/PageShared.module.scss";
+import styles from "./page.module.css";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import Link from "next/link";
@@ -21,29 +22,27 @@ export default async function IndexPage() {
     : "https";
 
   return (
-    <section className={styles.Content}>
-      <div className={styles.Section}>
-        <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
-          Arcjet attack protection example
-        </h1>
-        <p className="max-w-[700px] text-lg">
+    <section className={sharedStyles.Content}>
+      <div className={sharedStyles.Section}>
+        <h1 className={styles.title}>Arcjet attack protection example</h1>
+        <p className={styles.description}>
           This page is protected by{" "}
           <Link
             href="https://docs.arcjet.com/shield/concepts"
-            className="font-bold decoration-1 underline-offset-2 hover:underline"
+            className={styles.link}
           >
             Arcjet Shield
           </Link>
           .
         </p>
-        <p className="max-w-[700px] text-lg text-secondary-foreground">
+        <p className={styles.subdescription}>
           Once a certain suspicion threshold is reached, subsequent requests
           from that client are blocked for a period of time. Shield detects{" "}
           <Link
             href={
               "https://docs.arcjet.com/shield/concepts#which-attacks-will-arcjet-shield-block"
             }
-            className="font-bold decoration-1 underline-offset-2 hover:underline"
+            className={styles.link}
           >
             suspicious behavior
           </Link>
@@ -53,21 +52,21 @@ export default async function IndexPage() {
 
       <Divider />
 
-      <div className={styles.Section}>
-        <h2 className="text-xl font-bold">Try it</h2>
-        <p className="text-secondary-foreground">
+      <div className={sharedStyles.Section}>
+        <h2 className={styles.sectionHeading}>Try it</h2>
+        <p className={styles.secondaryText}>
           Simulate an attack using <code>curl</code>:
         </p>
-        <pre className="p-4">
+        <pre className={styles.codeExample}>
           curl -v -H &quot;x-arcjet-suspicious: true&quot; {protocol}://
           {hostname}/attack/test
         </pre>
-        <p className="max-w-[700px] text-secondary-foreground">
+        <p className={styles.explanation}>
           After the 5th request, your IP will be blocked for 15 minutes.
           Suspicious requests must meet a threshold before they are blocked to
           avoid false positives.
         </p>
-        <p className="max-w-[700px] text-secondary-foreground">
+        <p className={styles.explanation}>
           Shield can also be installed in middleware to protect your entire
           site.
         </p>
@@ -77,15 +76,15 @@ export default async function IndexPage() {
 
       <Divider />
 
-      <div className={styles.Section}>
-        <h2 className="text-xl font-bold">See the code</h2>
-        <p className="text-secondary-foreground">
+      <div className={sharedStyles.Section}>
+        <h2 className={styles.sectionHeading}>See the code</h2>
+        <p className={styles.secondaryText}>
           The{" "}
           <Link
             href="https://github.com/arcjet/example-nextjs/blob/main/app/attack/test/route.ts"
             target="_blank"
             rel="noreferrer"
-            className="font-bold decoration-1 underline-offset-2 hover:underline"
+            className={styles.link}
           >
             API route
           </Link>{" "}
@@ -94,7 +93,7 @@ export default async function IndexPage() {
             href="https://github.com/arcjet/example-nextjs/blob/main/lib/arcjet.ts"
             target="_blank"
             rel="noreferrer"
-            className="font-bold decoration-1 underline-offset-2 hover:underline"
+            className={styles.link}
           >
             centralized Arcjet client
           </Link>{" "}

app/bots/page.module.css

@@ -0,0 +1,49 @@
+.title {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 800;
+  line-height: 1.25;
+  letter-spacing: -0.05em;
+}
+
+@media (min-width: 768px) {
+  .title {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
+
+.description {
+  max-width: 700px;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.sectionHeading {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
+.secondaryText {
+  color: hsl(var(--secondary-foreground));
+}
+
+.link {
+  font-weight: 700;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+.link:hover {
+  text-decoration-line: underline;
+}
+
+.codeExample {
+  padding: 1rem;
+}
+
+.explanation {
+  max-width: 700px;
+  color: hsl(var(--secondary-foreground));
+}

app/bots/page.tsx

@@ -5,7 +5,8 @@ import type { Metadata } from "next";
 import { headers } from "next/headers";
 import Link from "next/link";
 
-import styles from "@/components/elements/PageShared.module.scss";
+import sharedStyles from "@/components/elements/PageShared.module.scss";
+import styles from "./page.module.css";
 
 export const metadata: Metadata = {
   title: "Bot protection example",
@@ -21,16 +22,14 @@ export default async function IndexPage() {
     : "https";
 
   return (
-    <section className={styles.Content}>
-      <div className={styles.Section}>
-        <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
-          Arcjet bot protection example
-        </h1>
-        <p className="max-w-[700px] text-lg">
+    <section className={sharedStyles.Content}>
+      <div className={sharedStyles.Section}>
+        <h1 className={styles.title}>Arcjet bot protection example</h1>
+        <p className={styles.description}>
           This page is protected by{" "}
           <Link
             href="https://docs.arcjet.com/bot-protection/concepts"
-            className="font-bold decoration-1 underline-offset-2 hover:underline"
+            className={styles.link}
           >
             Arcjet&apos;s bot protection
           </Link>{" "}
@@ -40,19 +39,19 @@ export default async function IndexPage() {
 
       <Divider />
 
-      <div className={styles.Section}>
-        <h2 className="text-xl font-bold">Try it</h2>
-        <p className="text-secondary-foreground">
+      <div className={sharedStyles.Section}>
+        <h2 className={styles.sectionHeading}>Try it</h2>
+        <p className={styles.secondaryText}>
           Make a request using <code>curl</code>, which is considered an
           automated client:
         </p>
-        <pre className="p-4">
+        <pre className={styles.codeExample}>
           curl -v {protocol}://{hostname}/bots/test
         </pre>
-        <p className="text-secondary-foreground">
+        <p className={styles.secondaryText}>
           Your IP will be blocked for 60 seconds.
         </p>
-        <p className="max-w-[700px] text-secondary-foreground">
+        <p className={styles.explanation}>
           Bot protection can also be installed in middleware to protect your
           entire site.
         </p>
@@ -62,15 +61,15 @@ export default async function IndexPage() {
 
       <Divider />
 
-      <div className={styles.Section}>
-        <h2 className="text-xl font-bold">See the code</h2>
-        <p className="text-secondary-foreground">
+      <div className={sharedStyles.Section}>
+        <h2 className={styles.sectionHeading}>See the code</h2>
+        <p className={styles.secondaryText}>
           The{" "}
           <Link
             href="https://github.com/arcjet/example-nextjs/blob/main/app/bots/test/route.ts"
             target="_blank"
             rel="noreferrer"
-            className="font-bold decoration-1 underline-offset-2 hover:underline"
+            className={styles.link}
           >
             API route
           </Link>{" "}
@@ -79,7 +78,7 @@ export default async function IndexPage() {
             href="https://github.com/arcjet/example-nextjs/blob/main/lib/arcjet.ts"
             target="_blank"
             rel="noreferrer"
-            className="font-bold decoration-1 underline-offset-2 hover:underline"
+            className={styles.link}
           >
             centralized Arcjet client
           </Link>{" "}

app/layout.module.css

@@ -0,0 +1,19 @@
+.body {
+  min-height: 100vh;
+  background-color: hsl(var(--background));
+  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1 1 0%;
+}

app/layout.tsx

@@ -3,10 +3,11 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { siteConfig } from "@/config/site";
 import { fontSans } from "@/lib/fonts";
 import { cn } from "@/lib/utils";
-import "@/styles/globals.scss";
+import "@/styles/globals.css";
 import type { Viewport } from "next";
 import { Metadata } from "next";
 import Script from "next/script";
+import styles from "./layout.module.css";
 
 export const viewport: Viewport = {
   themeColor: [
@@ -52,16 +53,11 @@ export default function RootLayout({ children }: RootLayoutProps) {
             data-domain="arcjet.com"
           />
         </head>
-        <body
-          className={cn(
-            "min-h-screen bg-background font-sans antialiased",
-            fontSans.variable,
-          )}
-        >
+        <body className={cn(styles.body, fontSans.variable)}>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <div className="relative flex min-h-screen flex-col">
+            <div className={styles.container}>
               <SiteHeader />
-              <div className="flex-1">{children}</div>
+              <div className={styles.content}>{children}</div>
             </div>
           </ThemeProvider>
         </body>