Chore/tailwind v4

package.json

@@ -29,26 +29,26 @@
     "@next/mdx": "^15.1.3",
     "@number-flow/react": "^0.4.2",
     "@prisma/client": "6.4.0",
-    "@radix-ui/react-accordion": "^1.2.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-hover-card": "1.1.6",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-navigation-menu": "^1.2.1",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.1.3",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@react-email/components": "0.0.31",
     "@stripe/react-stripe-js": "^2.8.1",
     "@stripe/stripe-js": "^4.8.0",
@@ -76,7 +76,7 @@
     "framer-motion": "^11.18.1",
     "lodash": "^4.17.21",
     "lowlight": "^3.1.0",
-    "lucide-react": "^0.439.0",
+    "lucide-react": "^0.477.0",
     "mini-svg-data-uri": "^1.4.4",
     "motion": "^11.12.0",
     "nanoid": "^5.0.9",
@@ -96,7 +96,7 @@
     "react-intersection-observer": "9.15.1",
     "react-markdown": "^9.0.3",
     "react-timer-hook": "^3.0.7",
-    "recharts": "^2.13.0-alpha.5",
+    "recharts": "^2.15.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
@@ -105,8 +105,7 @@
     "shiki": "^1.24.4",
     "sonner": "^1.5.0",
     "stripe": "^17.2.1",
-    "tailwind-container-break-out": "^2.0.9",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
     "uniqid": "^5.4.0",
     "unist-util-visit": "^5.0.0",
@@ -117,6 +116,7 @@
     "@content-collections/core": "^0.8.0",
     "@content-collections/mdx": "^0.2.0",
     "@content-collections/next": "^0.2.4",
+    "@tailwindcss/postcss": "4.0.9",
     "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.17.13",
     "@types/node": "^20.17.11",
@@ -125,14 +125,13 @@
     "@types/uniqid": "^5.3.4",
     "eslint": "^8",
     "eslint-config-next": "14.2.9",
-    "fluid-tailwind": "1.0.4",
     "knip": "^5.41.1",
     "postcss": "^8.4.47",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "prisma": "6.4.0",
     "react-email": "3.0.4",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.0.9",
     "turbo": "2.4.2",
     "typescript": "^5.7.2"
   }

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     'postcss-preset-mantine': {},
     'postcss-simple-vars': {
       variables: {

src/actions/ai/questions/question-help.ts

@@ -40,7 +40,7 @@ export const generateQuestionHelp = async (
   if (!user) {
     console.error('User not found');
     return {
-      object: null,
+      object: 'User not found',
       content: null,
       tokensUsed: 0,
     };
@@ -52,7 +52,7 @@ export const generateQuestionHelp = async (
     if (!hasTokens) {
       console.error('User does not have enough tokens');
       return {
-        object: null,
+        object: 'User does not have enough tokens',
         content: null,
         tokensUsed: 0,
       };
@@ -94,7 +94,7 @@ export const generateQuestionHelp = async (
   if (!question) {
     console.error('No question found');
     return {
-      object: null,
+      object: 'No question found',
       content: null,
       tokensUsed: 0,
     };
@@ -112,7 +112,7 @@ export const generateQuestionHelp = async (
     const deducted = await deductUserTokens(user);
     if (!deducted) {
       return {
-        object: null,
+        object: 'Cannot deduct tokens',
         content: null,
         tokensUsed: 0,
       };
@@ -179,17 +179,5 @@ export const generateQuestionHelp = async (
     }
   })();
 
-  // Determine token count for the response
-  const tokensUsed =
-    questionType === 'regular'
-      ? user.aiQuestionHelpTokens
-        ? user.aiQuestionHelpTokens - 1
-        : 0
-      : Number.POSITIVE_INFINITY;
-
-  return {
-    object: stream.value,
-    content: null,
-    tokensUsed: tokensUsed,
-  };
+  return { object: stream.value };
 };

src/app/(app)/(default_layout)/(roadmaps)/personalized-roadmaps/page.tsx

@@ -118,7 +118,7 @@ export default async function RoadmapPage() {
               hasAnsweredEnoughQuestions={hasAnsweredEnoughQuestions}
               answeredQuestionsCount={answeredQuestionsCount}
             />
-            <div className="bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-black-50 p-4 rounded-lg h-fit">
+            <div className="bg-[#090909] flex flex-col gap-y-2 backdrop-blur-xs border border-black-50 p-4 rounded-lg h-fit">
               <div className="flex items-center space-x-2 text-white">
                 <RoadmapIcon height="24" width="24" />
                 <span>Enjoying Roadmaps?</span>

src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx

@@ -129,8 +129,8 @@ export default async function ExploreQuestionsPage() {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
       <div className="flex flex-col gap-y-12 max-w-7xl mx-auto">
-        <Hero heading="Coding Roadmaps" subheading={heroDescription} container={true} />
-        <div className="lg:container flex flex-col lg:flex-row mt-5 gap-16">
+        <Hero heading="Coding Roadmaps" subheading={heroDescription} container={false} />
+        <div className="flex flex-col lg:flex-row mt-5 gap-16">
           <div className="w-full lg:w-[70%] flex flex-col gap-12">
             {Object.entries(studyPathsByCategory).map(([category, paths]) => (
               <div key={category} className="space-y-6">
@@ -155,7 +155,7 @@ export default async function ExploreQuestionsPage() {
                 missionsPromise={missionsPromise}
                 userMissionRecordsPromise={userMissionRecordsPromise}
               />
-              <div className="bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-black-50 p-4 rounded-lg h-fit">
+              <div className="bg-[#090909] flex flex-col gap-y-2 backdrop-blur-xs border border-black-50 p-4 rounded-lg h-fit">
                 <div className="flex items-center space-x-2 text-white">
                   <Mail className="size-5 text-white" />
                   <span>Suggest a roadmap</span>

src/app/(app)/dashboard/page.client.tsx

@@ -95,7 +95,7 @@ export default function ClientPage({
   return (
     <>
       <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-        <DialogContent className="sm:max-w-3xl bg-gradient-to-b shadow-xl bg-black">
+        <DialogContent className="sm:max-w-3xl bg-linear-to-b shadow-xl bg-black">
           <DialogHeader className="space-y-2">
             <DialogTitle className="text-2xl font-bold text-gradient from-white/55 to-white">
               Welcome to your personalized coding experience!

src/app/(app)/layout.tsx

@@ -51,7 +51,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo
               <NextTopLoader color="#5b61d6" showSpinner={false} />
               <SidebarLayout>
                 <CSPostHogProvider>
-                  <MantineProvider>{children}</MantineProvider>
+                  <MantineProvider>
+                    <div className="bg-[#000000] h-full">{children}</div>
+                  </MantineProvider>
                 </CSPostHogProvider>
               </SidebarLayout>
               <Toaster className="bg-black" />

src/app/(app)/providers.tsx

@@ -7,7 +7,7 @@ export default function RootProvider({ children }: { children: React.ReactNode }
 
   return (
     <main
-      className={cn('w-full transition-[width] duration-200 ease-in-out', 'py-2 lg:pb-3', {
+      className={cn('w-full transition-[width] duration-200 ease-in-out', {
         'lg:w-[calc(100%-15rem)]': state === 'expanded',
         'lg:w-[calc(100%-3rem)]': state === 'collapsed',
       })}

src/app/(app)/testing/upload-test/page.tsx

@@ -39,7 +39,7 @@ export default function UploadTestPage() {
         onChange={() => {
           onSubmit(event);
         }}
-        className="!hidden"
+        className="hidden!"
       />
     </div>
   );

src/app/(marketing)/changelog/page.tsx

@@ -10,7 +10,7 @@ export default function ChangelogPage() {
           <h1
             className="
             text-5xl lg:text-7xl !font-onest font-bold tracking-tight py-1.5 text-center
-            text-transparent bg-clip-text bg-gradient-to-r from-white to-white/75 leading-tight
+            text-transparent bg-clip-text bg-linear-to-r from-white to-white/75 leading-tight
           "
           >
             Changelog
@@ -32,7 +32,7 @@ export default function ChangelogPage() {
             'absolute inset-0 pt-44 [mask-image:radial-gradient(400px_circle_at_center,white,transparent)]'
           )}
         />
-        <div className="z-10 absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-[#000] to-transparent pointer-events-none"></div>
+        <div className="z-10 absolute inset-x-0 bottom-0 h-16 bg-linear-to-t from-[#000] to-transparent pointer-events-none"></div>
       </section>
       <ChangelogTimeline />
     </div>

src/app/(marketing)/features/leaderboard/page.tsx

@@ -75,7 +75,7 @@ const faqs = [
     answer: (
       <>
         Yes, TechBlitz is completely open source! Explore our source code on{' '}
-        <a href="https://git.new/blitz" target="_blank" className="!text-accent underline">
+        <a href="https://git.new/blitz" target="_blank" className="text-accent! underline">
           GitHub
         </a>{' '}
         and join the growing community of developers contributing to our platform.
@@ -87,7 +87,7 @@ const faqs = [
     answer: (
       <>
         You can sign up for a free account{' '}
-        <a href="/signup" className="!text-accent underline">
+        <a href="/signup" className="text-accent! underline">
           here
         </a>
         ! We're excited to see you on the leaderboard!
@@ -116,7 +116,7 @@ const featureShowcaseItems: MarketingContentGridProps[] = [
       <>
         Create custom learning paths tailored to your goals. Whether you're a complete beginner or
         advancing your skills, find the perfect route for your journey. Learn more{' '}
-        <a href="/features/roadmap" className="!text-accent underline">
+        <a href="/features/roadmap" className="text-accent! underline">
           here
         </a>
         .
@@ -140,7 +140,7 @@ const featureShowcaseItems: MarketingContentGridProps[] = [
       <>
         Keep track of your coding progress with our coding analytics. See your progression, create
         custom coding challenges, and more. Learn more{' '}
-        <a href="/features/statistics" className="!text-accent underline">
+        <a href="/features/statistics" className="text-accent! underline">
           here
         </a>
         .
@@ -154,7 +154,7 @@ const featureShowcaseItems: MarketingContentGridProps[] = [
       <>
         Bite-sized coding challenges to keep you engaged and learning. Perfect for busy developers
         who want to stay sharp and improve their skills. You can learn more{' '}
-        <a href="/features/daily-coding-challenges" className="!text-accent underline">
+        <a href="/features/daily-coding-challenges" className="text-accent! underline">
           here
         </a>
         .

src/app/(marketing)/features/roadmap/page.tsx

@@ -46,7 +46,7 @@ const faqs = [
       <>
         To access the roadmaps on techblitz, you need to have a premium account. You can sign up for
         a premium account{' '}
-        <a href="/pricing" className="!text-accent underline">
+        <a href="/pricing" className="text-accent! underline">
           here
         </a>
         .
@@ -66,7 +66,7 @@ const faqs = [
         <a
           href="https://github.com/techblitzdev/TechBlitz"
           target="_blank"
-          className="!text-accent underline"
+          className="text-accent! underline"
         >
           GitHub
         </a>{' '}

src/app/(marketing)/layout.tsx

@@ -35,7 +35,7 @@ export default function Layout({
         <body
           className={`${InterFont.variable} ${SatoshiFont.variable} ${UbuntuFont.variable} ${OnestFont.variable} overflow-x-hidden antialiased`}
         >
-          <main>
+          <main className="bg-[#000000]">
             <StarsBackground className="-z-10" />
             <CSPostHogProvider>
               <MantineProvider>

src/app/(marketing)/pricing/page.tsx

@@ -198,16 +198,16 @@ export default async function PricingPage() {
       />
       <div className="text-center min-h-screen container flex flex-col">
         <div className="flex flex-col gap-y-2 items-center pb-16 pt-28 md:pb-20 md:pt-32 xl:pt-40 xl:pb-32 max-w-7xl mx-auto">
-          <div className="group w-fit relative inline-flex overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
+          <div className="group w-fit relative inline-flex overflow-hidden rounded-full p-[1px] focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
             <span className="absolute inset-[-1000%] animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
             <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-3 py-1 text-sm font-medium text-white backdrop-blur-3xl">
               Pricing
             </span>
           </div>
-          <h1 className="text-3xl lg:text-5xl !font-onest !font-medium !leading-[1.1] text-gradient from-white to-white/75">
+          <h1 className="text-3xl lg:text-5xl font-onest! font-medium! leading-[1.1]! text-gradient from-white to-white/75">
             {/** Plans that don't <AnimatedBreak /> the bank */}
             Learning to code has <br />
-            <span className="bg-clip-text text-transparent bg-gradient-to-r from-accent to-accent/55">
+            <span className="bg-clip-text text-transparent bg-linear-to-r from-accent to-accent/55">
               never{' '}
             </span>{' '}
             been easier

src/app/(no_nav)/(auth)/signup/page.tsx

@@ -101,7 +101,7 @@ export default async function SignupPage() {
         <div className="w-full xl:w-1/2 flex flex-col gap-5 items-center justify-center lg:p-8">
           <div className="w-full space-y-6 max-w-md">
             <div className="flex flex-col gap-y-1">
-              <h1 className="!text-start font-bold font-onest text-xl lg:text-3xl mb-2 text-gradient from-white/75 to-white">
+              <h1 className="text-start! font-bold font-onest text-xl lg:text-3xl mb-2 text-gradient from-white/75 to-white">
                 Create your TechBlitz account
               </h1>
               <p className="text-sm text-gray-400 mb-4">
@@ -143,8 +143,8 @@ export default async function SignupPage() {
                 isFakeCard={true}
               />
             ))}
-            <div className="z-10 absolute inset-x-0 -left-8 bottom-0 h-36 bg-gradient-to-t from-[#000] to-transparent pointer-events-none"></div>
-            <div className="z-10 absolute inset-y-0 right-0 h-full w-44 bg-gradient-to-l from-[#000] to-transparent pointer-events-none"></div>
+            <div className="z-10 absolute inset-x-0 -left-8 bottom-0 h-36 bg-linear-to-t from-[#000] to-transparent pointer-events-none"></div>
+            <div className="z-10 absolute inset-y-0 right-0 h-full w-44 bg-linear-to-l from-[#000] to-transparent pointer-events-none"></div>
           </div>
         </div>
       </div>

src/app/(no_nav)/layout.tsx

@@ -16,7 +16,7 @@ export default function Layout({
           suppressHydrationWarning
         >
           {/* Scrollable content */}
-          <main>{children}</main>
+          <main className="bg-[#000000]">{children}</main>
           <Toaster className="bg-black" />
         </body>
       </html>

src/app/(questions)/question/[slug]/layout.tsx

@@ -141,7 +141,7 @@ export default async function QuestionUidLayout({
             userAnswered={userAnswered}
             suggestedQuestions={suggestedQuestions}
           >
-            <div className="grid grid-cols-12 items-center justify-between pt-2 px-3 relative">
+            <div className="grid grid-cols-12 items-center justify-between pt-2 px-3 relative bg-[#000000]">
               <div className="col-span-2 lg:col-span-4 flex items-center justify-start">
                 <RouterBack href="/questions" className="px-0 block md:hidden">
                   <HomeIcon width="16" height="16" />