Migrate to tailwind 4

Author: shiro

app.config.ts

@@ -6,6 +6,7 @@ import tsconfig from "./tsconfig.json";
 import { linariaVitePlugin } from "./vite/linariaVitePlugin";
 import { viteMarkdownPlugin } from "./vite/markdown/viteMarkdownPlugin";
 import { viteImagePlugin } from "./vite/viteImagePlugin";
+import tailwindcss from "@tailwindcss/vite";
 // @ts-ignore
 import babelPluginLazyPlus from "solid-lazy-plus/babel";
 
@@ -38,7 +39,7 @@ export default defineConfig({
 
   vite(options) {
     return {
-      css: { postcss: "./postcss.config.js" },
+      // css: { postcss: "./postcss.config.js" },
       server: {
         port: 3000,
         warmup: { clientFiles: ["./src/app.tsx"] },
@@ -49,7 +50,7 @@ export default defineConfig({
           Object.entries(tsconfig.compilerOptions.paths).map(([key, value]) => [
             key.replace(/\/\*$/, ""),
             path.join(process.cwd(), value[0].replace(/\/\*$/, "")),
-          ])
+          ]),
         ),
       },
       plugins: [
@@ -61,6 +62,7 @@ export default defineConfig({
           include: [/\/src\//],
           exclude: [/solid-refresh/, /\/@babel\/runtime\//, /\.import\./],
         }) as any,
+        tailwindcss(),
       ],
     };
   },

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example-basic",
+  "name": "blog",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -18,23 +18,28 @@
     "@solidjs/meta": "0.29.4",
     "@solidjs/router": "0.15.3",
     "@solidjs/start": "1.0.11",
+    "@tailwindcss/node": "^4.0.3",
+    "@tailwindcss/postcss": "^4.0.3",
+    "@tailwindcss/vite": "4.0.3",
     "@vinxi/plugin-mdx": "3.7.2",
     "@wyw-in-js/transform": "0.5.5",
     "@wyw-in-js/vite": "0.5.5",
     "babel-plugin-transform-remove-imports": "1.8.0",
     "classnames": "2.5.1",
     "cssnano": "6.1.2",
+    "lightningcss": "^1.29.1",
     "postcss-preset-env": "10.0.3",
     "postcss-pxtorem": "6.1.0",
     "rehype-raw": "7.0.0",
     "remark-shiki-twoslash": "3.1.3",
-    "sass": "1.77.8",
+    "sass": "1.84.0",
     "solid-js": "1.9.4",
     "solid-labels": "0.16.0",
     "solid-mdx": "0.0.7",
-    "tailwindcss": "3.4.10",
+    "tailwindcss": "4.0.3",
     "typescript": "5.7.3",
     "vinxi": "0.5.1",
+    "vite": "6.0.11",
     "vite-plugin-compile-time": "0.4.6"
   },
   "engines": {

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import cssnano from "cssnano";
-import tailwindcss from "tailwindcss";
+import tailwindcss from "@tailwindcss/postcss";
 import postcssPresentEnv from "postcss-preset-env";
 import pxtorem from "postcss-pxtorem";
 
@@ -9,7 +9,7 @@ export default {
       replace: true,
       propList: ["*"],
     }),
-    postcssPresentEnv(),
+    // postcssPresentEnv(),
     tailwindcss,
     ...(process.env.NODE_ENV === "production" ? [cssnano] : []),
   ],

postcss.config.js

@@ -20,6 +20,7 @@ export const isValidArticle = (name: string) => !!getArticleComponent(name);
 
 interface Props {
   name: string;
+  className?: string;
 }
 
 const Article: Component<Props> = (props) => {
@@ -28,7 +29,7 @@ const Article: Component<Props> = (props) => {
   const meta = articles.find((x: any) => x.slug == name)!;
 
   return (
-    <div class={_Article}>
+    <div class={cn(_Article, props.className)}>
       <Meta name="description" content={meta.description} />
       <span class="mb-2">
         <a href="/">Articles</a>{" "}
@@ -100,13 +101,13 @@ const Article: Component<Props> = (props) => {
             );
           },
           h1: (props: any) => (
-            <h2 {...props} class="text-h2 text-colors-text-900a" />
+            <h2 {...props} class="text-heading2 text-colors-text-900a" />
           ),
           h2: (props: any) => (
-            <h3 {...props} class="text-h3 text-colors-text-900a" />
+            <h3 {...props} class="text-heading3 text-colors-text-900a" />
           ),
           h3: (props: any) => (
-            <h4 {...props} class="text-h4 text-colors-text-900a" />
+            <h4 {...props} class="text-heading4 text-colors-text-900a" />
           ),
 
           ul: (props: any) => (
@@ -170,7 +171,7 @@ const Article: Component<Props> = (props) => {
                     class="ml-8 mr-8 h-full w-16 flex-shrink-0"
                   />
                   <div class="flex flex-1 flex-col gap-2 bg-colors-primary-200 pl-4 pr-4 shadow">
-                    <span class="mt-6 text-h2">
+                    <span class="text-heading2 mt-6">
                       <span class="text-colors-text-300a">{username}/</span>
                       <span class="text-colors-text-900a">{projectName}</span>
                     </span>

src/Article.tsx

@@ -20,7 +20,7 @@ const BlogIndex: Component = () => {
                 <a
                   href={`${config.base}${item.url}`}
                   class="flex flex-col p-4 no-underline">
-                  <span class="text-h2 text-colors-primary-800">
+                  <span class="text-heading2 text-colors-primary-800">
                     {item.title}
                   </span>
                   <span class="textbody mb-4 mt-1 text-colors-text-300a !no-underline">

src/BlogIndex.tsx

@@ -8,54 +8,54 @@ import { heading1TextHeight } from "~/style/textStylesTS";
 import LogoSVG from "../assets/logo.svg?component-solid";
 
 interface Props {
-  children?: JSX.Element;
+    children?: JSX.Element;
 }
 
 const Header: Component<Props> = (props) => {
-  const location = useLocation();
+    const location = useLocation();
 
-  const activeSection = $derefMemo(
-    createMemo(() => {
-      if (location.pathname.startsWith(`${config.base}/gallery`))
-        return "gallery";
-      if (location.pathname.startsWith(`${config.base}/about`)) return "about";
-      return "blog";
-    })
-  );
+    const activeSection = $derefMemo(
+        createMemo(() => {
+            if (location.pathname.startsWith(`${config.base}/gallery`))
+                return "gallery";
+            if (location.pathname.startsWith(`${config.base}/about`)) return "about";
+            return "blog";
+        })
+    );
 
-  return (
-    <nav
-      class={cn(
-        _Header,
-        "content-container mb-4 mt-4 flex items-center gap-8"
-      )}>
-      <a href={`${config.base}/`}>
-        <LogoSVG class={cn(Logo, "w-12")} viewBox="0 0 60 94.564" />
-      </a>
-      <NavLink href={`${config.base}/`} active={activeSection == "blog"}>
-        Blog
-      </NavLink>
-      <NavLink
-        href={`${config.base}/gallery`}
-        active={activeSection == "gallery"}>
-        Gallery
-      </NavLink>
-      <NavLink href={`${config.base}/about`} active={activeSection == "about"}>
-        About
-      </NavLink>
-    </nav>
-  );
+    return (
+        <nav
+            class={cn(
+                _Header,
+                "content-container mb-4 mt-4 flex items-center gap-8"
+            )}>
+            <a href={`${config.base}/`}>
+                <LogoSVG class={cn(Logo, "w-12")} viewBox="0 0 60 94.564" />
+            </a>
+            <NavLink href={`${config.base}/`} active={activeSection == "blog"}>
+                Blog
+            </NavLink>
+            <NavLink
+                href={`${config.base}/gallery`}
+                active={activeSection == "gallery"}>
+                Gallery
+            </NavLink>
+            <NavLink href={`${config.base}/about`} active={activeSection == "about"}>
+                About
+            </NavLink>
+        </nav>
+    );
 };
 
 const NavLink: Component<any> = (props: any) => {
-  const { children, href, active } = $destructure(props);
-  return (
-    <a
-      class={cn("text-h1", { "text-colors-text-900a underline": active })}
-      href={href}>
-      {children}
-    </a>
-  );
+    const { children, href, active } = $destructure(props);
+    return (
+        <a
+            class={cn("text-heading1", { "text-colors-text-900a underline": active })}
+            href={href}>
+            {children}
+        </a>
+    );
 };
 
 const _Header = css``;

src/Header.tsx

@@ -40,7 +40,9 @@ const LazyImage: (meta: LazyImageMeta) => Component<Props> =
         <img
           ref={imageRef}
           class={cn({ hasJS, loaded })}
-          onLoad={() => { loaded = true; }}
+          onLoad={() => {
+            loaded = true;
+          }}
           src={meta.url}
           {...rest}
         />
@@ -67,7 +69,9 @@ const _LazyImage = css`
 
   img {
     width: 100%;
-    height: 100%;
+    @layer components {
+      height: 100%;
+    }
     object-fit: inherit;
     // hide text when loading image
     font-size: 0;

src/LazyImage.tsx

@@ -18,16 +18,16 @@ interface Props {
 const AboutSite: Component<Props> = (props) => {
   return (
     <div class={cn(_AboutSite, "mb-8 grid gap-4")}>
-      <div class="flex flex-col gap-2 " style={{ "grid-area": "picture" }}>
-        <div class="flex h-[192px] w-[192px] items-center justify-center rounded border-4 border-colors-primary-500">
+      <div class="flex flex-col gap-2" style={{ "grid-area": "picture" }}>
+        <div class="flex h-[192px] w-[192px] items-center justify-center overflow-hidden rounded border-4 border-colors-primary-500">
           <ProfilePicture
             alt="Profile picture showing an manga-style face with glasses"
             class="h-full w-full"
           />
         </div>
       </div>
 
-      <div class="flex flex-col gap-2 " style={{ "grid-area": "stats" }}>
+      <div class="flex flex-col gap-2" style={{ "grid-area": "stats" }}>
         <StatsBar icon="heart" progress={28} type="secondary" label="HP">
           12/85
         </StatsBar>
@@ -39,34 +39,34 @@ const AboutSite: Component<Props> = (props) => {
       <div
         class="flex flex-col gap-2 text-center"
         style={{ "grid-area": "name" }}>
-        <div class="bg-colors-primary-500 pl-8 pr-8 text-h1 text-colors-text-900a">
+        <div class="text-heading1 bg-colors-primary-500 pl-8 pr-8 text-colors-text-900a">
           Matic Utsumi Gačar
         </div>
       </div>
 
       <div
-        class="flex flex-col gap-2 s:flex-row"
+        class="text-heading3 flex gap-2 s:flex-row"
         style={{ "grid-area": "title" }}>
-        <div class="text-nowrap text-h3">Level 21</div>
-        <div class="text-nowrap text-h3 xs:text-h3">
+        <div class="text-nowrap">Level 21</div>
+        <div class="xs:text-heading3 text-nowrap">
           Enthusiastic Software Engineer
         </div>
       </div>
       <LabeledBox label="general" style={{ "grid-area": "general" }}>
         <ul class="flex min-h-full flex-col gap-1">
-          <li class="flex gap-2 text-nowrap xs:text-h3 s:text-body">
+          <li class="xs:text-heading3 flex gap-2 text-nowrap s:text-body">
             <IconText icon="github" />
             <a href="https://github.com/shiro">github.com/shiro</a>
           </li>
-          <li class="flex gap-2 text-nowrap xs:text-h3 s:text-body">
+          <li class="xs:text-heading3 flex gap-2 text-nowrap s:text-body">
             <IconText icon="email" />
             <a href="mailto:matic@usagi.io">matic@usagi.io</a>
           </li>
-          <li class="flex gap-2 text-nowrap xs:text-h3 s:text-body">
+          <li class="xs:text-heading3 flex gap-2 text-nowrap s:text-body">
             <IconText icon="globe" />
             <a href="https://usagi.io">usagi.io</a>
           </li>
-          <li class="flex gap-2 text-nowrap xs:text-h3 s:text-body">
+          <li class="xs:text-heading3 flex gap-2 text-nowrap s:text-body">
             <IconText icon="house" />
             <span>Tokyo</span>
           </li>

src/about/AboutSite.tsx

@@ -152,8 +152,8 @@ const Project: Component<any> = (props: any) => {
   return (
     <div>
       <div class="mb-8 flex xs:flex-col xs:gap-1 s:flex-row s:gap-4">
-        <span class="text-nowrap text-h3 text-colors-text-900a">{name}</span>
-        <span class="text-nowrap text-h3 text-colors-text-300a">
+        <span class="text-nowrap text-heading3 text-colors-text-900a">{name}</span>
+        <span class="text-nowrap text-heading3 text-colors-text-300a">
           {descripton}
         </span>
       </div>