Tailwindcss v4 updates.

Author: digitalnomad91

next.config.ts

@@ -9,6 +9,14 @@ const nextConfig: NextConfig = {
     resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
   },
 
+  output: 'export',
+
+  // Note: If you are using next/image, you may need to add an
+  // unoptimized: true flag here if you are not using a custom loader.
+  images: {
+    unoptimized: true,
+  },
+
   eslint: {
     ignoreDuringBuilds: true,
   },

src/assets/css/globals.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 :root {
   --background: #ffffff;

tailwind.config.ts

@@ -3,8 +3,9 @@ import colors from 'tailwindcss/colors'
 
 const config: Config = {
   content: [
-    './src/app/**/*.{js,ts,jsx,tsx}', // Include files in src/app
-    './src/components/**/*.{js,ts,jsx,tsx}', // Optionally include other directories
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
@@ -17,8 +18,10 @@ const config: Config = {
           5: '#26b7e1',
           6: '#09afdf',
         },
-        background: 'var(--background)',
-        foreground: 'var(--foreground)',
+        // background: 'var(--background)',
+        //foreground: 'var(--foreground)',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         transparent: 'transparent',
         current: 'currentColor',
         black: colors.black,