chore: upgrade tailwindcss

up to v4

app/g/[id]/page.tsx

@@ -35,7 +35,7 @@ export default async function Page({
           height={32}
           className="rounded-lg-full "
         />
-        <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap overflow-ellipsis">
+        <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap text-ellipsis">
           <Link href="/gists">
             <LinkAnchor external={false}>{gist.login}</LinkAnchor>
           </Link>

app/g/loading.tsx

@@ -14,7 +14,7 @@ const loading = () => {
         <h1
           className={clsx(
             'ml-2 overflow-hidden text-xl',
-            'whitespace-nowrap overflow-ellipsis',
+            'whitespace-nowrap text-ellipsis',
             'flex items-center',
           )}
         >

app/global-error.tsx

@@ -16,9 +16,7 @@ const GlobalError = ({
         className={clsx('w-full h-dvh flex', 'justify-center items-center')}
       >
         <div>
-          <h2 className="text-xl text-subtext1">
-            Something went wrong! ノ( OωOノ)
-          </h2>
+          <h2 className="text-xl">Something went wrong! ノ( OωOノ)</h2>
           <Button onClick={() => reset()}>Try again</Button>
         </div>
       </body>

app/p/[slug]/loading.tsx

@@ -11,7 +11,7 @@ const Page = async () => {
         id="article"
         className={clsx(
           'relative max-w-4xl px-4 mx-auto my-10',
-          'lg:w-[56rem] w-full flex-1',
+          'lg:w-4xl w-full flex-1',
           'mt-8',
         )}
       >

app/p/[slug]/page.tsx

@@ -62,7 +62,7 @@ const Page = async ({
         id="article"
         className={clsx(
           'relative max-w-4xl px-4 mx-auto my-10',
-          'lg:w-[56rem] w-full flex-1',
+          'lg:w-4xl w-full flex-1',
         )}
       >
         <h1>{mdxSource.frontmatter?.title}</h1>

components/common/back-to-top.tsx

@@ -36,7 +36,7 @@ const BackToTop = () => {
       <Button
         onClick={handleBack}
         className={clsx(
-          '!p-3 fixed',
+          'p-3! fixed',
           'right-4 bottom-4',
           'lg:right-8 lg:bottom-8',
           'transition-all duration-300',

components/mdx/anchor.tsx

@@ -19,7 +19,7 @@ const Anchor = forwardRef<HTMLAnchorElement, Props>(
           <span
             className={clsx(
               'mx-[2px] text-teal-500 relative',
-              'before:left-0 before:top-[1px] before:block before:absolute',
+              'before:left-0 before:top-px before:block before:absolute',
               'before:w-full before:h-full before:transition-all before:shadow-underline',
               'hover:before:shadow-throughline',
               'dark:text-teal-600',

components/mdx/link-anchor.tsx

@@ -14,7 +14,7 @@ const Anchor = ({ children, external = true, className }: Props) => {
       <span
         className={clsx(
           'mx-[2px] text-teal-500 relative',
-          'before:left-0 before:top-[1px] before:block before:absolute',
+          'before:left-0 before:top-px before:block before:absolute',
           'before:w-full before:h-full before:transition-all before:shadow-underline',
           'hover:before:shadow-throughline',
           'dark:text-teal-600',

components/pages/blog/post-card.tsx

@@ -30,7 +30,7 @@ const PostCard = ({ post }: Props) => {
             <div className="hidden lg:block">{post.date}</div>
           </div>
 
-          <div className="flex justify-between text-subtext0">
+          <div className="flex justify-between">
             <div className="flex items-center text-sm">
               {Array.isArray(post.tags) ? (
                 post.tags.map((tag) => (

components/pages/friends/friend-card.tsx

@@ -18,7 +18,7 @@ const FriendCard = ({ friend }: { friend: Friend }) => {
       >
         <div>
           <h2 className={clsx('text-xl font-semibold')}>{friend.name}</h2>
-          <div className="text-sm text-subtext0">{friend.link}</div>
+          <div className="text-sm">{friend.link}</div>
         </div>
         <div className="overflow-hidden rounded-lg w-14 h-14">
           <Image

components/pages/gists/gists-code-skeleton.tsx

@@ -16,7 +16,7 @@ const GistsCode = () => {
   return (
     <>
       <div className={styles.wrapper}>
-        <div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
+        <div className="h-[30px] bg-[#f6f8fa] dark:bg-rua-gray-700 flex">
           <div className="flex items-center h-full mx-3">
             <div
               className={clsx(
@@ -45,8 +45,8 @@ const GistsCode = () => {
             className={clsx(
               'px-4 bg-white',
               'leading-[30px]',
-              'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
-              'overflow-hidden whitespace-nowrap overflow-ellipsis',
+              'dark:bg-rua-gray-700 dark:border-b dark:border-b-[rgb(128,203,196)]',
+              'overflow-hidden whitespace-nowrap text-ellipsis',
               'flex items-center',
             )}
           >

components/pages/gists/gists-code.tsx

@@ -41,7 +41,7 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
     <>
       {showFileName ? (
         <div className={clsx(styles.wrapper, 'relative group')}>
-          <div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
+          <div className="h-[30px] bg-[#f6f8fa] dark:bg-rua-gray-700 flex">
             <div className="flex items-center h-full mx-3">
               <div
                 className={clsx(
@@ -70,8 +70,8 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
               className={clsx(
                 'px-4 bg-white',
                 'leading-[30px]',
-                'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
-                'overflow-hidden whitespace-nowrap overflow-ellipsis',
+                'dark:bg-rua-gray-700 dark:border-b dark:border-b-[rgb(128,203,196)]',
+                'overflow-hidden whitespace-nowrap text-ellipsis',
               )}
             >
               {file.filename}

components/pages/gists/gists-skeleton.tsx

@@ -16,7 +16,7 @@ const GistSkeleton = () => {
             <h1
               className={clsx(
                 'ml-2 overflow-hidden text-xl',
-                'whitespace-nowrap overflow-ellipsis',
+                'whitespace-nowrap text-ellipsis',
                 'w-[234px] animate-pulse bg-gray-300',
                 'h-6 rounded-lg',
                 'dark:bg-gray-400',

components/pages/projects/project-card-skeleton.tsx

@@ -16,7 +16,7 @@ const PojectCardSkeleton = () => {
       >
         <VscGithubInverted className="w-8 h-8" />
 
-        <a className="w-[calc(100%_-_40px)]" target="_blank" rel="noreferrer">
+        <a className="w-[calc(100%-40px)]" target="_blank" rel="noreferrer">
           <h2
             className={clsx(
               'text-xl overflow-hidden',

components/pages/projects/project-card.tsx

@@ -33,7 +33,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
 
         <a
           href={project.url}
-          className="w-[calc(100%_-_40px)]"
+          className="w-[calc(100%-40px)]"
           target="_blank"
           rel="noreferrer"
         >

components/post/post-toc.tsx

@@ -58,12 +58,12 @@ const PostToc = ({ toc, tocLength }: Props) => {
         </div>
 
         <div className="toc text-lg">
-          <ul className="!pl-[unset]">
+          <ul className="pl-[unset]!">
             {toc?.map((h) => (
               <Fragment key={h.link}>
                 <TocItem item={h} />
                 {h.children.map((child) => (
-                  <ul className="!pl-4" key={child.link}>
+                  <ul className="pl-4!" key={child.link}>
                     <TocItem item={child} />
                   </ul>
                 ))}

components/rua/loading/vercel-loading.tsx

@@ -5,7 +5,7 @@ import styles from './vercel-loading.module.css';
 const VercelLoading = () => {
   return (
     <>
-      <div className="fixed bottom-[10px] right-[20px] z-[99999]">
+      <div className="fixed bottom-[10px] right-[20px] z-99999">
         <div
           id="container"
           className={clsx(styles.container, styles.visible, styles.building)}

components/rua/tab/index.tsx

@@ -29,7 +29,7 @@ const Tab = ({ defaultValue, children }: Props) => {
         <ul
           role="tablist"
           aria-orientation="horizontal"
-          className="flex list-none !p-[unset]"
+          className="flex list-none p-[unset]!"
         >
           {children.map((child) => (
             <li
@@ -44,7 +44,7 @@ const Tab = ({ defaultValue, children }: Props) => {
                 'select-none cursor-pointer',
                 'min-w-[76px] text-center',
                 'hover:bg-gray-200 dark:hover:bg-rua-gray-800',
-                '!list-none',
+                'list-none!',
               )}
             >
               {child.props.label}

components/rua/tab/tab-item.tsx

@@ -11,7 +11,7 @@ export type ItemProps = {
 const TabItem = ({ showContent, children }: ItemProps) => {
   return (
     <>
-      <div className={clsx('hidden', showContent && '!block')}>{children}</div>
+      <div className={clsx('hidden', showContent && 'block!')}>{children}</div>
     </>
   );
 };

content/posts/leptos-dark-mode.mdx

@@ -111,7 +111,7 @@ pub fn DarkMode(#[prop(optional)] class: Cow<'static, str>) -> impl IntoView {
             </div>
             <ul
                 tabindex="0"
-                class="dropdown-content menu bg-base-100 rounded-box z-[1] w-32 p-2 shadow flex flex-col h-64 overflow-y-auto flex-nowrap"
+                class="dropdown-content menu bg-base-100 rounded-box z-1 w-32 p-2 shadow flex flex-col h-64 overflow-y-auto flex-nowrap"
             >
                 <For
                     each=move || COLOR_MODE

next.config.mjs

@@ -17,6 +17,11 @@ const nextConfig = {
   reactStrictMode: true,
   // swcMinify: true,
   output: 'standalone',
+  allowedDevOrigins: [
+    'local-origin.dev',
+    '*.local-origin.dev',
+    '192.168.31.158',
+  ],
   images: {
     remotePatterns: [
       {

pnpm-lock.yaml

@@ -6343,7 +6343,7 @@ snapshots:
 
   lightningcss@1.30.1:
     dependencies:
-      detect-libc: 2.0.3
+      detect-libc: 2.0.4
     optionalDependencies:
       lightningcss-darwin-arm64: 1.30.1
       lightningcss-darwin-x64: 1.30.1
@@ -7906,7 +7906,7 @@ snapshots:
       acorn-import-attributes: 1.9.5(acorn@8.13.0)
       browserslist: 4.24.5
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.1
       es-module-lexer: 1.5.4
       eslint-scope: 5.1.1
       events: 3.3.0

styles/globals.css

@@ -35,6 +35,7 @@
 }
 
 @config "../tailwind.config.js";
+@plugin "@catppuccin/tailwindcss";
 
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -81,8 +82,8 @@ font-family: 'Poppins', sans-serif;
 
 @layer base {
   body {
-    /* @apply text-gray-600 bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200; */
-    @apply text bg-linear-to-b from-base to-crust;
+    @apply text-gray-600 bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200;
+    /* @apply text bg-linear-to-b from-base to-crust; */
     font-family:
       'Poppins',
       -apple-system,