setup tailwindcss and package.json

BaseMax · BaseMax · commit 91e07f27a2fe · 2026-04-03T12:35:02.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,15 +16,23 @@
     "magic-string": "^0.30.21",
     "mri": "^1.2.0",
     "node-addon-api": "^8.7.0",
+    "phaser": "^3.90.0",
     "picocolors": "^1.1.1",
     "picomatch": "^4.0.4",
+    "postcss": "^8.4.45",
     "source-map-js": "^1.2.1",
     "tailwindcss": "^4.2.2",
     "tapable": "^2.3.2"
   },
+  "devDependencies": {
+    "npm-run-all": "^4.1.5"
+  },
   "scripts": {
-    "start": "eleventy --serve",
-    "build": "eleventy"
+    "css:build": "tailwindcss -i ./src/assets/css/tailwind-input.css -o ./src/assets/css/tailwind.css",
+    "css:watch": "tailwindcss -i ./src/assets/css/tailwind-input.css -o ./src/assets/css/tailwind.css --watch",
+    "start": "npm-run-all --parallel css:watch eleventy:serve",
+    "eleventy:serve": "eleventy --serve",
+    "build": "npm run css:build && eleventy"
   },
   "repository": {
     "type": "git",
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/assets/css/tailwind-input.css b/src/assets/css/tailwind-input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/assets/js/init.js b/src/assets/js/init.js
@@ -0,0 +1,7 @@
+// Initialize Phaser from npm package
+import('../../node_modules/phaser/dist/phaser.js').then((module) => {
+  window.Phaser = module.default || module.Phaser;
+  console.log('Phaser loaded from npm package (v' + window.Phaser.VERSION + ')');
+}).catch((error) => {
+  console.error('Failed to load Phaser:', error);
+});
diff --git a/src/index.njk b/src/index.njk
@@ -7,9 +7,9 @@ layout: false
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Developer Directory</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="/assets/js/phaser.min.js"></script>
+  <link rel="stylesheet" href="/assets/css/tailwind.css">
   <link rel="stylesheet" href="/assets/css/style.css">
+  <script src="/assets/js/init.js" type="module"></script>
 </head>
 <body class="min-h-screen scroll-smooth bg-[var(--bg-page)] text-[var(--text-main)] transition-colors duration-300">
 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{njk,js,yaml}',
+    './src/**/*.html'
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`