chore: upgrade tailwindcss

up to v4

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>
     </>
   );
 };