feat: migrate from tailwind_v3 to tailwind_v4

Author: FrancescoMottaDev

components/PostListItem.tsx

@@ -29,7 +29,7 @@ const PostListItem: React.FC<PostListItemProps> = ({
         readonly
         source={featuredImg}
         alt="Blog article featured image"
-        imageClassName="aspect-video object-cover rounded-sm"
+        imageClassName="aspect-video object-cover rounded-xs"
       />
 
       {/* justify-between */}

components/errorNoKeys.tsx

@@ -5,27 +5,27 @@ const ErrorNoKeys = () => {
         Warning: missing App credentials
       </h1>
       <p className="mb-6">
-        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded">
+        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded-sm">
           NEXT_PUBLIC_APP_ID
         </code>{' '}
         and{' '}
-        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded">
+        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded-sm">
           API_KEY
         </code>{' '}
         are not configured in your{' '}
-        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded">
+        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded-sm">
           .env.local
         </code>{' '}
         file.
       </p>
       <p className="mb-2">
         Please create a{' '}
-        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded">
+        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded-sm">
           .env.local
         </code>{' '}
         file with:
       </p>
-      <pre className="bg-gray-900 text-white px-4 py-3 rounded">
+      <pre className="bg-gray-900 text-white px-4 py-3 rounded-sm">
         {`NEXT_PUBLIC_APP_ID=...
 API_KEY=...`}
       </pre>

css/styles.css

@@ -1,3 +1,34 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans: var(--font-nunito);
+
+  --breakpoint-sm: 600px;
+  --breakpoint-lg: 900px;
+  --breakpoint-xl: 1200px;
+
+  --shadow-news-letter: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 5px 15px 0 rgba(0, 0, 0, 0.05);
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

package.json

@@ -27,14 +27,14 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/postcss": "^4.0.12",
     "@types/jsonp": "^0.2.3",
     "@types/node": "^22.0.0",
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.3",
     "@types/react-slick": "^0.23.13",
-    "autoprefixer": "^10.4.19",
     "postcss": "^8.4.40",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^4.0.12",
     "typescript": "^5.5.4"
   },
   "prettier": {

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

react-bricks/bricks/custom/MyHeroUnit.tsx

@@ -54,7 +54,7 @@ const MyHeroUnit: types.Brick<HeroUnitProps> = ({ padding }) => {
             types.RichTextFeatures.Link,
           ]}
           renderCode={(props) => (
-            <code className="text-sm py-1 px-2 bg-gray-200 dark:bg-gray-700 rounded">
+            <code className="text-sm py-1 px-2 bg-gray-200 dark:bg-gray-700 rounded-sm">
               {props.children}
             </code>
           )}