Remove default max-width on tailwind prose

PullJosh · Jul 8, 2024 · 9e6e132 · 9e6e132
1 parent 77c36d8
commit 9e6e132
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 6 deletions.
diff --git a/app/(content)/privacy-policy/page.tsx b/app/(content)/privacy-policy/page.tsx
@@ -9,7 +9,7 @@ export default function PrivacyPolicyPage() {
         <div className="mb-6 text-sm italic text-gray-700">
           Last updated: <time>June 25th, 2024</time>
         </div>
-        <div className="prose prose-sm max-w-full sm:prose-base">
+        <div className="prose prose-sm sm:prose-base">
           <div className="relative flex gap-4 rounded-2xl border border-dashed border-indigo-200 bg-indigo-100 p-8">
             <svg
               xmlns="http://www.w3.org/2000/svg"

diff --git a/app/admin/projects/[id]/page.tsx b/app/admin/projects/[id]/page.tsx
@@ -46,7 +46,7 @@ export default async function AdminProjectPage({
   }
 
   return (
-    <div className="prose max-w-full">
+    <div className="prose">
       <h1>{project.title}</h1>
       <ul>
         <li>

diff --git a/app/admin/projects/assetScan/page.tsx b/app/admin/projects/assetScan/page.tsx
@@ -37,7 +37,7 @@ export default async function AssetScan({
   });
 
   return (
-    <div className="prose w-full max-w-full">
+    <div className="prose w-full">
       <h1>All Uploaded Assets</h1>
       <PaginationButtons currentPage={page} />
 

diff --git a/app/admin/projects/page.tsx b/app/admin/projects/page.tsx
@@ -32,7 +32,7 @@ export default async function AdminProjects() {
   ).length;
 
   return (
-    <div className="prose max-w-full">
+    <div className="prose">
       <h1>Projects ({projectsCount})</h1>
       <p className="lead">
         {sharedProjectsCount} shared, {unsharedProjectsCount} unshared,{" "}

diff --git a/app/admin/users/[id]/page.tsx b/app/admin/users/[id]/page.tsx
@@ -58,7 +58,7 @@ export default async function AdminUserPage({
   }
 
   return (
-    <div className="prose max-w-full">
+    <div className="prose">
       <h1>{user.username}</h1>
       <p>
         <Link href={`/users/${user.username}`}>View public profile</Link>

diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
@@ -36,7 +36,7 @@ export default async function AdminUsers() {
   ).length;
 
   return (
-    <div className="prose max-w-full">
+    <div className="prose">
       <h1>Users ({usersCount})</h1>
       <p className="lead">
         {verifiedUsersCount} verified, {unverifiedUsersCount} unverified;{" "}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,13 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
 
+const round = (num) =>
+  num
+    .toFixed(7)
+    .replace(/(\.[0-9]+?)0+$/, "$1")
+    .replace(/\.0$/, "");
+const rem = (px) => `${round(px / 16)}rem`;
+const em = (px, base) => `${round(px / base)}em`;
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   mode: "jit",
@@ -22,6 +30,28 @@ module.exports = {
       fontFamily: {
         sans: ["Inter var", ...defaultTheme.fontFamily.sans],
       },
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: {
+            maxWidth: "unset",
+            code: {
+              fontWeight: "500",
+              backgroundColor: theme("colors.gray.300"),
+              paddingTop: em(2, 12),
+              paddingRight: em(4, 12),
+              paddingBottom: em(2, 12),
+              paddingLeft: em(4, 12),
+              borderRadius: rem(3),
+            },
+            "code::before": {
+              display: "none",
+            },
+            "code::after": {
+              display: "none",
+            },
+          },
+        },
+      }),
     },
     colors: {
       transparent: "transparent",