Merge branch 'tailwindcss-v4' into feature/jan2025-update-dependencies

Author: sectsect

apps/solidjs-boilerplate/package.json

@@ -26,8 +26,6 @@
     "@playwright/test": "^1.53.1",
     "@secretlint/secretlint-rule-preset-recommend": "^10.1.0",
     "@solidjs/testing-library": "^0.8.10",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
@@ -80,7 +78,7 @@
     "stylelint-config-recess-order": "^7.1.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-prettier": "^5.0.3",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.10",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-solid": "^2.11.6",
@@ -91,6 +89,7 @@
     "@sect/solid-hiding-header": "workspace:*",
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.3",
+    "@tailwindcss/vite": "^4.1.10",
     "@tanstack/solid-query": "^5.80.10",
     "escape-goat": "^4.0.0",
     "isomorphic-dompurify": "^2.25.0",

apps/solidjs-boilerplate/postcss.config.cjs

@@ -0,0 +1,3 @@
+{
+  "plugins": ["postcss-import", "postcss-nesting", "@tailwindcss/postcss"]
+}

apps/solidjs-boilerplate/postcss.config.json

@@ -1,10 +1,52 @@
-@import url('base/settings.css');
-@import url('base/svg.css');
-@import url('libs/hiding-header.css');
+@import url('base/settings.css') layer(base);
+@import url('base/svg.css') layer(base);
+@import url('libs/hiding-header.css') layer(base);
+
+@import 'tailwindcss';
+
+@theme {
+  /* remove `line-height` from `text-{size}` */
+  --text-*: initial;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+  --text-4xl: 36px;
+  --text-5xl: 48px;
+  --text-6xl: 60px;
+  --text-7xl: 72px;
+  --text-8xl: 96px;
+  --text-9xl: 128px;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility inner {
+  @apply w-full px-4 md:max-w-(--breakpoint-2xl) md:px-16 md:mx-auto;
+  /* @media (--viewport-medium) {
+
+  } */
+}
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 /* @ https://tailwindcss.jp/docs/functions-and-directives#layer */
 @layer base {
   html {
@@ -45,21 +87,17 @@
 
 @layer components {
   body {
-    @apply font-sans text-base font-bold leading-normal text-black antialiased;
+    font-family: 'Noto Sans JP', sans-serif;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 1.5;
+    color: #000;
+    -webkit-font-smoothing: antialiased;
   }
 
   #root {
-    @apply flex flex-col min-h-screen;
-  }
-
-  article {
-    @apply h-article;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
   }
-
-  .inner {
-    @apply w-full px-4 md:max-w-screen-2xl md:px-16 md:mx-auto;
-  }
-  /* @media (--viewport-medium) {
-
-  } */
 }

apps/solidjs-boilerplate/src/styles/globals.css

@@ -3,9 +3,10 @@
 import solidPlugin from 'vite-plugin-solid';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { defineConfig } from 'vitest/config';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-  plugins: [solidPlugin(), tsconfigPaths()],
+  plugins: [solidPlugin(), tsconfigPaths(), tailwindcss()],
   server: {
     port: 3000,
   },