Fix TailwindCSS v4 Vite build and compile assets (#211)

* Fix Vite build for TailwindCSS 4 and compile assets

* Remove useLocalization to fix Vue crash

Author: pawell67

dist/css/tool.css

@@ -1,4 +1,5 @@
 {
+    "name": "nova-command-runner",
     "private": true,
     "scripts": {
         "dev": "vite build --watch",
@@ -8,6 +9,7 @@
     "devDependencies": {
         "@inertiajs/inertia": "^0.11.1",
         "@inertiajs/inertia-vue3": "^0.6.0",
+        "@tailwindcss/vite": "^4.2.1",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vue/compiler-sfc": "^3.5.13",
         "postcss": "^8.4.49",
@@ -17,4 +19,4 @@
         "autoprefixer": "^10.4.20",
         "tailwindcss": "^4.0.14"
     }
-}
+}

dist/js/tool.js

@@ -1,2 +1 @@
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

package-lock.json

@@ -302,11 +302,14 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { useLocalization } from "LaravelNova";
 import Button from "../components/Button.vue";
 import ToolbarButton from "../components/ToolbarButton.vue";
 
-const { __ } = useLocalization()
+const __ = (key) => {
+    return window.Nova && window.Nova.config && window.Nova.config('translations') && window.Nova.config('translations')[key] 
+        ? window.Nova.config('translations')[key] 
+        : key;
+};
 const loading = ref(false);
 const playing = ref(false);
 const running = ref(false);

package.json

@@ -1,9 +1,10 @@
+import tailwindcss from "@tailwindcss/vite";
 import vue from "@vitejs/plugin-vue";
 import { resolve } from "path";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-    plugins: [vue()],
+    plugins: [vue(), tailwindcss()],
 
     define: {
         "process.env": process.env, // Vite ditched process.env, so we need to pass it in