Properly migrate project to Tailwind CSS v4

.vscode/settings.json

@@ -13,6 +13,15 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "always"
   },
+  // Enable suggestions inside strings for Tailwind CSS class names
+  // https://github.com/tailwindlabs/tailwindcss-intellisense#editorquicksuggestions
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.experimental.configFile": {
+    "apps/frontend/src/app/globals.css": "apps/frontend/src/**"
+  },
+  "tailwindCSS.classFunctions": ["tw", "clsx", "cn"],
   "files.associations": {
     ".css": "tailwindcss",
     "*.scss": "tailwindcss"

apps/frontend/components.json

@@ -12,7 +12,7 @@
     "rsc": true,
     "tsx": true
   },
-  "iconLibrary": "lucide",
+  "iconLibrary": "fontawesome",
   "aliases": {
     "components": "@web/modules/shared/components",
     "utils": "@web/lib/utils",

apps/frontend/package.json

@@ -59,16 +59,15 @@
     "schema-dts": "^1.1.5",
     "sharp": "^0.34.5",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss": "4.1.17",
+    "tailwindcss": "^4.1.18",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.3",
     "zod": "^4.1.13",
     "zod-validation-error": "^5.0.0",
     "zustand": "^5.0.9"
   },
   "devDependencies": {
-    "@shrutibalasa/tailwind-grid-auto-fit": "^1.1.0",
-    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/mdx": "^2.0.13",
     "@types/react-modal": "^3.16.3",
     "eslint-config-next": "16.0.8",

apps/frontend/postcss.config.js → apps/frontend/postcss.config.mjs

@@ -1,6 +1,7 @@
-module.exports = {
+const config = {
   plugins: {
     '@tailwindcss/postcss': {},
-    autoprefixer: {},
   },
 };
+
+export default config;

apps/frontend/src/app/(content)/(info)/about/page.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 const AboutPage = () => {
   return (
     <>
-      <article className='max-w-screen-md mx-auto mb-36'>
+      <article className='max-w-(--breakpoint-md) mx-auto mb-36'>
         <NoteBlockWorldLogo
           size={112}
           orientation='horizontal'

apps/frontend/src/app/(content)/(info)/blog/[id]/page.tsx

@@ -50,12 +50,12 @@ const BlogPost = async ({ params }: BlogPageProps) => {
         <Image
           src={post.image}
           alt=''
-          className='w-full h-[30vh] md:h-[50vh] object-cover mb-8 mt-[-2.5rem] rounded-xl'
+          className='w-full h-[30vh] md:h-[50vh] object-cover mb-8 -mt-10 rounded-xl'
           width={1920}
           height={1080}
         />
       )}
-      <article className='max-w-screen-md mx-auto mb-36'>
+      <article className='max-w-(--breakpoint-md) mx-auto mb-36'>
         <Link
           href='/blog'
           className='text-zinc-500 hover:text-zinc-400 text-sm'

apps/frontend/src/app/(content)/(info)/blog/page.tsx

@@ -33,7 +33,7 @@ const BlogPageComponent = ({ posts }: { posts: PostType[] }) => {
         {"See what we've been working on!"}
       </h2>
 
-      <section className='grid grid-auto-fit-xl max-w-screen-md mx-auto justify-center w-full items-center gap-8'>
+      <section className='grid grid-auto-fit-xl max-w-(--breakpoint-md) mx-auto justify-center w-full items-center gap-8'>
         {posts.map((post, i) => (
           <Link
             key={i}
@@ -46,10 +46,10 @@ const BlogPageComponent = ({ posts }: { posts: PostType[] }) => {
                 width={480}
                 height={360}
                 alt=''
-                className='rounded-md aspect-[16/9] w-full object-cover transition-all duration-300 mb-2'
+                className='rounded-md aspect-video w-full object-cover transition-all duration-300 mb-2'
               />
 
-              <h3 className='text-lg font-bold text-opacity-50 mb-2 leading-6 flex-grow'>
+              <h3 className='text-lg font-bold mb-2 leading-6 grow'>
                 {post.title}
               </h3>
               <p className='text-zinc-300 tracking-wide text-sm mb-2'>

apps/frontend/src/app/(content)/(info)/contact/page.tsx

@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 const AboutPage = () => {
   return (
     <>
-      <article className='max-w-screen-md mx-auto mb-36'>
+      <article className='max-w-(--breakpoint-md) mx-auto mb-36'>
         <BackButton className='text-zinc-500 hover:text-zinc-400 text-sm'>
           {'< Back'}
         </BackButton>

apps/frontend/src/app/(content)/(info)/help/[id]/page.tsx

@@ -46,7 +46,7 @@ const HelpPost = async ({ params }: HelpPageProps) => {
 
   return (
     <>
-      <article className='max-w-screen-md mx-auto mb-36'>
+      <article className='max-w-(--breakpoint-md) mx-auto mb-36'>
         <Link
           href='/help'
           className='text-zinc-500 hover:text-zinc-400 text-sm'

apps/frontend/src/app/(content)/(info)/help/page.tsx

@@ -45,11 +45,11 @@ const HelpPageComponent = ({ posts }: { posts: PostType[] }) => {
                 width={480}
                 height={360}
                 alt={post.title}
-                className='rounded-2xl aspect-[3/2] object-cover brightness-150 transition-all duration-300'
+                className='rounded-2xl aspect-3/2 object-cover brightness-150 transition-all duration-300'
               />
 
               {/* Gradient over the image */}
-              <div className='absolute top-0 left-0 w-full h-full hover:bg-white/20 transition-all duration-300 bg-gradient-to-b from-transparent to-black/80 rounded-2xl'>
+              <div className='absolute top-0 left-0 w-full h-full hover:bg-white/20 transition-all duration-300 bg-linear-to-b from-transparent to-black/80 rounded-2xl'>
                 <h3 className='relative w-full h-full p-3 sm:p-6 flex justify-center items-end text-xl text-opacity-50'>
                   {post.shortTitle || post.title}
                 </h3>

apps/frontend/src/app/(external)/layout.tsx

@@ -10,7 +10,7 @@ export default async function LoginLayout({
   return (
     <>
       <div
-        className="fixed z-[-1] w-full h-full bg-center bg-repeat grayscale-[50%] before:content-[''] before:absolute before:w-full before:h-full before:bg-gradient-to-b before:from-black/20 before:to-black/90"
+        className="fixed z-[-1] w-full h-full bg-center bg-repeat grayscale-50 before:content-[''] before:absolute before:w-full before:h-full before:bg-linear-to-b before:from-black/20 before:to-black/90"
         style={{
           backgroundImage: "url('/background-tile-flat.png')",
         }}

apps/frontend/src/app/globals.css

@@ -1,9 +1,40 @@
 @import 'tailwindcss';
-/*---break---*/
+
 @plugin "tailwindcss-animate";
-/*---break---*/
+
 @custom-variant dark (&:is(.dark *));
 
+@theme {
+  --font-sans: var(--font-lato);
+  --ease-out-back: cubic-bezier(0.34, 1.56, 0.51, 1.2);
+}
+
+/************** Grid utilities **************/
+
+@utility grid-auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+
+@utility grid-auto-fit-xs {
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+@utility grid-auto-fit-sm {
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+}
+
+@utility grid-auto-fit-md {
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+
+@utility grid-auto-fit-lg {
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+}
+
+@utility grid-auto-fit-xl {
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+
 /************** Scrollbar **************/
 
 html {
@@ -302,3 +333,12 @@ ins.adsbygoogle[data-ad-status='unfilled'] {
   }
 }
 */
+
+/* Make buttons use pointer cursor */
+/* See: https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */
+@layer base {
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}

apps/frontend/src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { config } from '@fortawesome/fontawesome-svg-core';
 import { GoogleAnalytics } from '@next/third-parties/google';
 import type { Metadata } from 'next';
 import { Lato } from 'next/font/google';
@@ -14,9 +15,17 @@ import DetectAdBlock from '../modules/shared/components/client/ads/DetectAdBlock
 import GoogleAdSense from '../modules/shared/components/GoogleAdSense';
 import { TooltipProvider } from '../modules/shared/components/tooltip';
 
+// Pre-import FontAwesome CSS to avoid FOUC
+// See: https://fontawesome.com/docs/web/use-with/react/use-with#nextjs
+import '@fortawesome/fontawesome-svg-core/styles.css';
+
+// Prevent FontAwesome from injecting CSS after initial render
+config.autoAddCss = false;
+
 const lato = Lato({
   subsets: ['latin'],
   weight: ['100', '300', '400', '700', '900'],
+  variable: '--font-lato',
 });
 
 export const metadata: Metadata = {
@@ -50,7 +59,7 @@ export default function RootLayout({
 }) {
   return (
     <ReCaptchaProvider useEnterprise>
-      <html lang='en'>
+      <html lang='en' className={lato.variable}>
         <head>
           <GoogleAdSense pId={process.env.NEXT_PUBLIC_ADSENSE_CLIENT} />
           {/* https://nextjs.org/docs/app/building-your-application/optimizing/metadata#json-ld */}
@@ -102,7 +111,7 @@ export default function RootLayout({
           <Toaster
             position='bottom-center'
             toastOptions={{
-              className: '!bg-zinc-700 !text-white !max-w-fit',
+              className: 'bg-zinc-700! text-white! max-w-fit!',
               duration: 4000,
             }}
           />

apps/frontend/src/app/not-found.tsx

@@ -40,13 +40,13 @@ export default function NotFound() {
   return (
     <>
       <div
-        className="fixed w-full h-full bg-center bg-repeat grayscale brightness-50 opacity-30 before:content-[''] before:absolute before:w-full before:h-full before:bg-gradient-to-b before:from-black/20 before:to-black/80"
+        className="fixed w-full h-full bg-center bg-repeat grayscale brightness-50 opacity-30 before:content-[''] before:absolute before:w-full before:h-full before:bg-linear-to-b before:from-black/20 before:to-black/80"
         style={{
           backgroundImage: "url('/background-tile-flat.png')",
         }}
       ></div>
 
-      <main className='w-full h-screen text-center [&>*]:z-[2] p-2 bg-zinc-900 flex flex-col items-center justify-center gap-8'>
+      <main className='w-full h-screen text-center *:z-2 p-2 bg-zinc-900 flex flex-col items-center justify-center gap-8'>
         {/* Background image */}
 
         <p className='font-light text-zinc-400 text-5xl'>Oops...</p>
@@ -57,7 +57,7 @@ export default function NotFound() {
             width={400}
             height={400}
             quality={95}
-            className='object-contain relative md:left-8 top-8 w-64 md:w-full z-[2]'
+            className='object-contain relative md:left-8 top-8 w-64 md:w-full z-2'
           />
           <h1 className='leading-none font-black text-[10rem] md:text-[18rem] z-1 text-zinc-600/30 relative bottom-8 md:right-12 md:bottom-16'>
             404

apps/frontend/src/modules/auth/components/loginPage.tsx

@@ -51,9 +51,9 @@ export const LoginPage = () => {
         <NoteBlockWorldLogo glow={true} orientation='adaptive' size={128} />
 
         {/* Vertical divider (mobile) */}
-        <div className='w-[1px] min-h-full hidden sm:block bg-zinc-600'></div>
+        <div className='w-px min-h-full hidden sm:block bg-zinc-600'></div>
         {/* Horizontal divider (desktop) */}
-        <div className='h-[1px] min-w-full block sm:hidden bg-zinc-600'></div>
+        <div className='h-px min-w-full block sm:hidden bg-zinc-600'></div>
 
         {/* Right half */}
         <div className='flex flex-col justify-center items-center gap-5'>
@@ -87,6 +87,7 @@ export const LoginPage = () => {
               <FontAwesomeIcon
                 icon={faGoogle}
                 className='align-middle mr-2 h-5'
+                size='lg'
               />
               <span className='flex-1 text-nowrap'>Log in with Google</span>
             </Link>
@@ -99,6 +100,7 @@ export const LoginPage = () => {
               <FontAwesomeIcon
                 icon={faGithub}
                 className='align-middle mr-2 h-5'
+                size='lg'
               />
               <span className='flex-1'>Log in with GitHub</span>
             </Link>
@@ -111,6 +113,7 @@ export const LoginPage = () => {
               <FontAwesomeIcon
                 icon={faDiscord}
                 className='align-middle mr-2 h-5'
+                size='lg'
               />
               <span className='flex-1 text-nowrap'>Log in with Discord</span>
             </Link>

apps/frontend/src/modules/auth/components/loginWithEmailPage.tsx

@@ -14,9 +14,9 @@ export const LoginWithEmailPage = () => {
         <NoteBlockWorldLogo glow={true} orientation='adaptive' size={128} />
 
         {/* Vertical divider (mobile) */}
-        <div className='w-[1px] min-h-full hidden sm:block bg-zinc-600'></div>
+        <div className='w-px min-h-full hidden sm:block bg-zinc-600'></div>
         {/* Horizontal divider (desktop) */}
-        <div className='h-[1px] min-w-full block sm:hidden bg-zinc-600'></div>
+        <div className='h-px min-w-full block sm:hidden bg-zinc-600'></div>
 
         {/* Right half */}
         <div className='flex flex-col justify-center items-center gap-5'>

apps/frontend/src/modules/browse/EventBanner.tsx

@@ -32,7 +32,7 @@ export const EventBanner = () => {
   };
 
   return (
-    <div className='flex flex-row mx-auto w-fit justify-between items-center text-pretty gap-6 py-4 px-2 sm:px-8 text-md rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-opacity-50 bg-gradient-to-br from-15% from-pink-800 via-rose-900 to-85% to-red-900 relative'>
+    <div className='flex flex-row mx-auto w-fit justify-between items-center text-pretty gap-6 py-4 px-2 sm:px-8 text-md rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-linear-to-br from-15% from-pink-800/50 via-rose-900/50 to-85% to-red-900/50 relative'>
       <div
         className='absolute h-full w-full top-0 left-0 z-[-1] rounded-xl opacity-50 brightness-[0.3]'
         style={{
@@ -43,7 +43,7 @@ export const EventBanner = () => {
       ></div>
       <Image src='/img/event/maestro-icon.png' alt='' width={64} height={64} />
 
-      <div className='flex-1 leading-tight max-w-screen-md w-fit'>
+      <div className='flex-1 leading-tight max-w-(--breakpoint-md) w-fit'>
         <p className='uppercase text-md font-bold tracking-wider text-yellow-300 mb-1 w-fit'>
           <FontAwesomeIcon icon={faExclamationCircle} />{' '}
           {timeLeft === 0 ? (

apps/frontend/src/modules/browse/WelcomeBanner.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 export const WelcomeBanner = () => {
   return (
-    <div className='flex flex-col md:flex-row mx-auto w-fit justify-between items-center text-center text-balance gap-1 py-4 px-2 sm:px-8 text-sm rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-opacity-50 bg-gradient-to-br from-15% from-green-700 via-cyan-800 to-85% to-blue-900 border-2 border-white/20'>
+    <div className='flex flex-col md:flex-row mx-auto w-fit justify-between items-center text-center text-balance gap-1 py-4 px-2 sm:px-8 text-sm rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-linear-to-br from-15% from-green-700/50 via-cyan-800/50 to-85% to-blue-900/50 border-2 border-white/20'>
       <div
         className='absolute h-full w-full top-0 left-0 z-[-1] rounded-xl opacity-20 brightness-50 hue-rotate-90'
         style={{
@@ -19,7 +19,7 @@ export const WelcomeBanner = () => {
         width={100}
         height={100}
       />
-      <div className='flex-1 leading-tight max-w-screen-md'>
+      <div className='flex-1 leading-tight max-w-(--breakpoint-md)'>
         <h1 className='text-lg font-bold mb-1 text-green-400'>
           Welcome to <strong className='text-teal-300'>Note Block World</strong>
           !

apps/frontend/src/modules/browse/components/HomePageComponent.tsx

@@ -82,7 +82,7 @@ export const HomePageComponent = () => {
 
       {/* RECENT SONGS */}
       <div className='flex flex-row flex-wrap justify-between items-center gap-4 mb-2'>
-        <h2 className='text-xl uppercase z-[2]'>Recent songs</h2>
+        <h2 className='text-xl uppercase z-2'>Recent songs</h2>
         <CategoryButtonGroup />
       </div>
       <div className='h-6' />

apps/frontend/src/modules/browse/components/SongCard.tsx

@@ -17,7 +17,7 @@ const SongDataDisplay = ({ song }: { song: SongPreviewDtoType | null }) => {
       <div className='relative'>
         {!song ? (
           <Skeleton
-            className='w-full h-full rounded-lg aspect-[5/3] object-cover'
+            className='w-full h-full rounded-lg aspect-5/3 object-cover'
             containerClassName='block leading-none'
           />
         ) : (
@@ -33,9 +33,9 @@ const SongDataDisplay = ({ song }: { song: SongPreviewDtoType | null }) => {
       </div>
 
       {/* Song info */}
-      <div className='flex flex-row justify-between px-4 pt-0.5 text-pretty flex-grow'>
+      <div className='flex flex-row justify-between px-4 pt-0.5 text-pretty grow'>
         {/* Song title */}
-        <h3 className='text-md font-semibold leading-tight w-full h-10 flex-grow line-clamp-2'>
+        <h3 className='text-md font-semibold leading-tight w-full h-10 grow line-clamp-2'>
           {song?.title || <Skeleton count={2} />}
         </h3>
       </div>
@@ -51,7 +51,7 @@ const SongDataDisplay = ({ song }: { song: SongPreviewDtoType | null }) => {
           )}
         </p>
         {/* Play icon & count */}
-        <div className='text-md flex items-center gap-1 flex-shrink'>
+        <div className='text-md flex items-center gap-1 shrink'>
           {!song ? (
             <Skeleton className='min-w-16' />
           ) : (