install tailwind

package.json

@@ -49,13 +49,16 @@
     "vfile-reporter": "latest"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.16",
     "bimap": "latest",
     "cytoscape": "latest",
     "eslint": "latest",
     "eslint-config-next": "latest",
+    "postcss": "^8.4.32",
     "remark-frontmatter": "latest",
     "remark-react": "latest",
     "remark-stringify": "latest",
+    "tailwindcss": "^3.4.0",
     "uuid": "latest"
   },
   "resolutions": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

styles/global.css

@@ -1,14 +1,3 @@
-html,
+@tailwind base;
-body {
+@tailwind components;
-  padding: 0;
+@tailwind utilities;
-  margin: 0;
-  font-family: 'Inter', sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-#sidebar {
-    padding-left: 16px;
-}

tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+