refactor(frontend): Migrate tailwind config to v4

.devcontainer/devcontainer.json

@@ -26,7 +26,8 @@
 			"extensions": [
 				"hbenl.vscode-mocha-test-adapter",
 				"dbaeumer.vscode-eslint",
-				"unifiedjs.vscode-mdx"
+				"unifiedjs.vscode-mdx",
+				"bradlc.vscode-tailwindcss"
 			]
 		}
 	},

.vscode/settings.json

@@ -5,5 +5,12 @@
     "search.exclude": {
         "**/.docusaurus": true,
         "**/build": true
-    }
+    },
+    "tailwindCSS.files.exclude": [
+        "docsite/**"
+    ],
+    "files.associations": {
+        "*.css": "tailwindcss"
+    },
+    "tailwindCSS.experimental.configFile": "src/client/index.css"
 }

src/client/App.css

@@ -1,5 +1,3 @@
-@import "tailwindcss";
-
 .App {
   text-align: center;
 }

src/client/index.css

@@ -1,6 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@utility container {  
+   padding-inline: 1rem;
+}
+
+@theme {
+    --breakpoint-md: 1024px;
+}
 
 body {
   margin: 0;

tailwind.config.js

@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-      "index.html"
-  ],
-  theme: {
-    container: {
-      padding: '1rem',
-    },
-    extend: {
-      screens: {
-      'md': '1024px'
-      }
-    },
-  },
-  plugins: [],
-}