chore: migrate gpa-calculator to tailwind 4

And off of the play CDN. Unfortunately, Fontaine has issues with Tailwind’s generated styles, see unjs/fontaine#446. Also, @tailwindcss/forms is really ugly with our styles. Fixes: #5.
PSDTools · Jan 19, 2025 · 7dbf37f · 7dbf37f
1 parent e1e931a
commit 7dbf37f
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 16 deletions.
diff --git a/apps/gpa-calculator/index.html b/apps/gpa-calculator/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width" />
     <title>GPA Calculator</title>
     <script type="module" src="/src/script.ts"></script>
-    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body class="bg-[url('/bground.png')]" onload="startApp()">
     <!-- The overlay -->
@@ -35,7 +34,7 @@
 
     <div class="main">
       <div
-        class="borderwhite border-b-1 grid grid-cols-6 gap-4 border border-l-0 border-r-0 border-t-0 bg-black p-8 text-white lg:w-1/3 lg:p-2"
+        class="border-b-1 grid grid-cols-6 gap-4 border border-l-0 border-r-0 border-t-0 bg-black p-8 text-white lg:w-1/3 lg:p-2"
       >
         <button
           type="button"
@@ -87,11 +86,11 @@ <h5>How to use!</h5>
             type="number"
             placeholder="Number of Classes"
             id="numOfClasses"
-            class="mt-3 rounded-sm pl-1 text-black"
+            class="rounded-xs mt-3 pl-1 text-black"
           />
           <button
             onclick="classAmount()"
-            class="rounded-sm px-1 text-black"
+            class="rounded-xs px-1 text-black"
             type="submit"
           >
             Submit

diff --git a/apps/gpa-calculator/package.json b/apps/gpa-calculator/package.json
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@psdtools/tsconfig": "workspace:^",
+    "@tailwindcss/vite": "4.0.0-beta.9",
     "@total-typescript/ts-reset": "^0.6.1",
     "@vite-pwa/assets-generator": "^0.2.6",
     "browserslist": "^4.24.4",
@@ -47,6 +48,7 @@
     "fontaine": "^0.5.0",
     "jiti": "^2.4.2",
     "lightningcss": "^1.29.1",
+    "tailwindcss": "4.0.0-beta.9",
     "typescript": "~5.7.3",
     "vite": "^6.0.7",
     "vite-plugin-html-minifier": "^1.0.5",

diff --git a/apps/gpa-calculator/src/styles/global.css b/apps/gpa-calculator/src/styles/global.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 html,
 body {
   height: 100%;
@@ -11,8 +13,7 @@ body {
 }
 
 body {
-  font-family: Norwester, "Norwester fallback", Verdana, Geneva, Tahoma,
-    sans-serif;
+  font-family: Norwester, "Norwester fallback";
 }
 
 button {

diff --git a/apps/gpa-calculator/tailwind.config.ts b/apps/gpa-calculator/tailwind.config.ts
diff --git a/apps/gpa-calculator/vite.config.ts b/apps/gpa-calculator/vite.config.ts
@@ -1,6 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
 import browserslist from "browserslist";
 import browserslistToEsbuild from "browserslist-to-esbuild";
-import { FontaineTransform } from "fontaine";
 import { browserslistToTargets } from "lightningcss";
 import { defineConfig } from "vite";
 import htmlMinifier from "vite-plugin-html-minifier";
@@ -27,10 +27,13 @@ export default defineConfig({
     transformer: "lightningcss",
   },
   plugins: [
-    FontaineTransform.vite({
-      fallbacks: ["Verdana", "Geneva", "Tahoma", "sans-serif"],
-      resolvePath: (path) => new URL(`.${path}`, import.meta.url),
-    }),
+    tailwindcss(),
+    // See unjs/fontaine#446.
+    // FontaineTransform.vite({
+    //   fallbacks: ["Verdana", "Geneva", "Tahoma", "sans-serif"],
+    //   // Convert an absolute paths to be relative to the root.
+    //   resolvePath: (path) => new URL(`.${path}`, import.meta.url),
+    // }),
     htmlMinifier({
       minify: true,
     }),

diff --git a/knip.json b/knip.json
@@ -5,7 +5,7 @@
       "entry": ["src/{script,sw}.ts"],
       "project": ["**/*.{js,cjs,mjs,ts,cts,mts}"],
       "ignore": ["eslint.config.ts", "tailwind.config.ts"],
-      "ignoreDependencies": ["deputy"]
+      "ignoreDependencies": ["deputy", "fontaine"]
     },
     "apps/petal-notes": {
       "ignore": [".storybook/vitest.setup.ts", "eslint.config.ts"],

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/project_words.txt b/project_words.txt
@@ -1,3 +1,4 @@
+fontaine
 Fontaine
 fontawesome
 fortawesome
@@ -8,6 +9,7 @@ Pattonville
 remeda
 storybookjs
 Tahoma
+unjs
 vanillajs
 Verdana
 Xmark