⬆️ Upgrade Tailwind CSS to v4

usagizmo · Apr 19, 2024 · bc0c23d · bc0c23d
1 parent 2421897
commit bc0c23d
Show file tree

Hide file tree

Showing 15 changed files with 520 additions and 349 deletions.
diff --git a/README.md b/README.md
@@ -29,8 +29,8 @@ Monorepo template for creating a web application.
 
 #### `packages/`
 
-- `tailwind-preset-base`  
-  A preset for use with `tailwind.config.js` and `global.css`.
+- `tailwind-preset`  
+  A preset for use with `global.css`.
 - `eslint-config`  
   `eslint` configurations. (w/ [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) + eslint-config-[[prettier](https://github.com/prettier/eslint-config-prettier)|[turbo](https://www.npmjs.com/package/eslint-config-turbo)])
 

diff --git a/apps/mockup/package.json b/apps/mockup/package.json
@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "tailwindcss -i ../../packages/tailwind-preset-base/global.css -o ./public/styles.css --minify",
-    "dev:tailwind": "tailwindcss ../../packages/tailwind-preset-base/global.css -o ./public/styles.css --watch",
+    "build": "tailwindcss -i ../../packages/tailwind-preset/global.css -o ./public/styles.css --minify",
+    "dev:tailwind": "tailwindcss -i ../../packages/tailwind-preset/global.css -o ./public/styles.css --watch",
     "dev:server": "browser-sync start --server './public/' --files './public/' --startPath '/' --port 8000",
     "dev": "concurrently pnpm:dev:*",
     "lint:markup": "markuplint --config ../../.markuplintrc.cjs \"**\"",
@@ -23,10 +23,10 @@
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
-    "@repo/tailwind-preset-base": "workspace:*",
+    "@repo/tailwind-preset": "workspace:*",
+    "@tailwindcss/cli": "4.0.0-alpha.14",
     "browser-sync": "^3.0.2",
     "image-size": "^1.1.1",
-    "tailwindcss": "^3.4.3",
     "vitest": "^1.4.0"
   }
 }
diff --git a/apps/mockup/public/index.html b/apps/mockup/public/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-screen">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -36,41 +36,41 @@
     />
     <link rel="stylesheet" href="./styles.css" />
   </head>
-  <body class="relative h-full bg-gray-100 text-zinc-900">
+  <body class="bg-gray-100 text-zinc-900">
     <header class="border-b border-slate-200 bg-slate-50 px-4 md:sticky md:top-0 md:z-20">
       <div
         class="relative mx-auto flex max-w-[1120px] flex-col items-center justify-center py-5 md:h-16 md:flex-row md:py-0"
       >
         <h1 class="text-center text-[26px] font-bold leading-tight tracking-tighter lg:text-[32px]">
           WebApp Template (mockup)
         </h1>
-        <p class="mt-2 text-sm text-zinc-500 md:ml-auto md:mt-0 md:px-4 lg:px-5 lg:text-base">
+        <p class="mt-2 text-sm text-zinc-500 md:mt-0 md:ml-auto md:px-4 lg:px-5 lg:text-base">
           A starting point for building a static site.
         </p>
         <div class="mt-5 md:mt-0">
           <a
             href="https://github.com/usagizmo/webapp-template"
             target="_blank"
             rel="noopener noreferrer"
-            class="flex rounded-md bg-zinc-900 px-5 py-2 text-sm text-white hover:bg-opacity-80"
+            class="hover:bg-opacity-80 flex rounded-md bg-zinc-900 py-2 px-5 text-sm text-white"
           >
             GitHub
           </a>
         </div>
       </div>
     </header>
 
-    <main class="px-4 pb-20 pt-10">
+    <main class="pt-10 px-4 pb-20">
       <div class="mx-auto max-w-[1120px] space-y-9">
         <!-- Development -->
         <div>
           <h2 class="mb-4 text-2xl font-bold md:text-3xl">What's inside?</h2>
-          <section class="rounded-lg border border-slate-200 bg-slate-50 px-6 pb-8 pt-5">
+          <section class="rounded-lg border border-slate-200 bg-slate-50 pt-5 px-6 pb-8">
             <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">Uses</h3>
             <div>
               <ul class="space-y-0.5">
                 <li
-                  class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                  class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                 >
                   <a
                     target="_blank"
@@ -89,7 +89,7 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">Uses</h3>
                   >
                 </li>
                 <li
-                  class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                  class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                 >
                   <a
                     target="_blank"
@@ -122,7 +122,7 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">Uses</h3>
                   )
                 </li>
                 <li
-                  class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                  class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                 >
                   <a
                     target="_blank"
@@ -153,7 +153,7 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">Uses</h3>
                   >
                 </li>
                 <li
-                  class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                  class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                 >
                   <a
                     target="_blank"
@@ -172,7 +172,7 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">Uses</h3>
                   >
                 </li>
                 <li
-                  class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                  class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                 >
                   GitHub Actions (
                   <ul class="inline">
@@ -186,7 +186,7 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">Uses</h3>
                   )
                 </li>
                 <li
-                  class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                  class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                 >
                   Execute <code class="font-mono font-bold text-black">`eslint --fix`</code> and
                   <code class="font-mono font-bold text-black">`prettier`</code> when saving with VS
@@ -203,13 +203,13 @@ <h2 class="mb-4 text-2xl font-bold md:text-3xl">Apps and Packages</h2>
           <div class="space-y-6 md:flex md:gap-5 md:space-y-0">
             <!-- apps/-->
             <section
-              class="rounded-lg border border-slate-200 bg-slate-50 px-6 pb-8 pt-5 md:flex-1"
+              class="rounded-lg border border-slate-200 bg-slate-50 pt-5 px-6 pb-8 md:flex-1"
             >
               <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">apps/</h3>
               <div>
                 <ul class="space-y-0.5">
                   <li
-                    class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                    class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                   >
                     <strong class="font-semibold">nhost</strong><br />
                     Local environment test server and production
@@ -223,7 +223,7 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">apps/</h3>
                     migration.
                   </li>
                   <li
-                    class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                    class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                   >
                     <strong class="font-semibold">mockup</strong><br />
                     A starting point for building a static site.<br />
@@ -262,7 +262,7 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">apps/</h3>
                     </ul>
                   </li>
                   <li
-                    class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                    class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                   >
                     <strong class="font-semibold">web</strong><br />
                     A starting point for building Svelte application.<br />
@@ -308,21 +308,20 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">apps/</h3>
 
             <!-- packages/-->
             <section
-              class="rounded-lg border border-slate-200 bg-slate-50 px-6 pb-8 pt-5 md:flex-1"
+              class="rounded-lg border border-slate-200 bg-slate-50 pt-5 px-6 pb-8 md:flex-1"
             >
               <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">packages/</h3>
               <div>
                 <ul class="space-y-0.5">
                   <li
-                    class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                    class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                   >
-                    <strong class="font-semibold">tailwind-preset-base</strong><br />
+                    <strong class="font-semibold">tailwind-preset</strong><br />
                     A preset for use with
-                    <code class="font-mono font-bold text-black">`tailwind.config.js`</code> and
                     <code class="font-mono font-bold text-black">`global.css`</code>.
                   </li>
                   <li
-                    class="relative pl-5 before:absolute before:left-0 before:top-2 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
+                    class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                   >
                     <strong class="font-semibold">eslint-config</strong><br />
                     <code class="font-mono font-bold text-black">`eslint`</code>
@@ -383,7 +382,7 @@ <h2 class="mb-4 text-2xl font-bold md:text-3xl">Commands</h2>
               href="https://github.com/usagizmo/webapp-template"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex rounded-md bg-zinc-900 px-5 py-2 text-sm text-white hover:bg-opacity-80"
+              class="hover:bg-opacity-80 flex rounded-md bg-zinc-900 py-2 px-5 text-sm text-white"
             >
               GitHub
             </a>

diff --git a/apps/mockup/tailwind.config.js b/apps/mockup/tailwind.config.js
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -31,19 +31,17 @@
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
-    "@repo/tailwind-preset-base": "workspace:*",
+    "@repo/tailwind-preset": "workspace:*",
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.5",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "autoprefixer": "^10.4.19",
+    "@tailwindcss/postcss": "4.0.0-alpha.14",
     "eslint": "^8.57.0",
     "graphqurl": "^1.0.1",
-    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
     "svelte": "5.0.0-next.90",
-    "svelte-check": "^3.6.8",
-    "tailwindcss": "^3.4.3",
+    "svelte-check": "^3.6.9",
     "tslib": "^2.6.2",
     "typescript": "^5.4.3",
     "vite": "^5.2.7",

diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '@repo/tailwind-preset-base/global.css';
+  import '@repo/tailwind-preset/global.css';
 
   import type { Snippet } from 'svelte';
   import { nhost } from '$lib/nhost';

diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "markuplint": "^4.4.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
-    "prettier-plugin-tailwindcss": "^0.5.13",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "turbo": "^1.13.0"
   },
   "packageManager": "pnpm@9.0.2",

diff --git a/packages/tailwind-preset-base/.eslintrc.cjs b/packages/tailwind-preset-base/.eslintrc.cjs
diff --git a/packages/tailwind-preset-base/global.css b/packages/tailwind-preset-base/global.css
diff --git a/packages/tailwind-preset-base/index.js b/packages/tailwind-preset-base/index.js
diff --git a/packages/tailwind-preset/global.css b/packages/tailwind-preset/global.css
@@ -0,0 +1,14 @@
+/* ref. https://tailwindcss.com/blog/tailwindcss-v4-alpha  */
+@import 'tailwindcss';
+
+@theme {
+  /* --font-family-sans: YakuHanJP, Noto Sans JP, sans-serif;
+  --font-family-sans: -apple-system, blinkMacSystemFont, Helvetica, 'Yu Gothic', YuGothic,
+    'BIZ UDPGothic', Meiryo, sans-serif;
+  --font-family-sans: -apple-system, blinkMacSystemFont, Helvetica, 'Hiragino Sans',
+    'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', Meiryo, sans-serif;
+  --font-family-serif: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', serif; */
+  --font-family-sans: Inter, YakuHanJP, Noto Sans JP, sans-serif;
+  --font-family-mono: Source Code Pro, monospace;
+  --font-family-keycode: Lucida Grande;
+}
diff --git a/packages/tailwind-preset-base/package.json → packages/tailwind-preset/package.json b/packages/tailwind-preset-base/package.json → packages/tailwind-preset/package.json
@@ -1,23 +1,18 @@
 {
-  "name": "@repo/tailwind-preset-base",
+  "name": "@repo/tailwind-preset",
   "version": "0.0.0",
   "type": "module",
-  "module": "index.js",
   "exports": {
-    ".": "./index.js",
     "./global.css": "./global.css"
   },
   "scripts": {
-    "lint:js": "eslint .",
     "lint:cspell": "cspell \"**\"",
     "lint:prettier": "prettier --check --ignore-path=../../.prettierignore .",
     "lint": "concurrently pnpm:lint:*",
-    "format:js": "eslint --fix .",
     "format:prettier": "prettier --write --ignore-path=../../.prettierignore .",
     "format": "concurrently pnpm:format:*"
   },
   "devDependencies": {
-    "@repo/eslint-config": "workspace:*",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "4.0.0-alpha.14"
   }
 }