build(core): support Filament 4

README.md

@@ -9,6 +9,12 @@ Easily see the fi- class of any element on the page by hovering over it. A toolt
 
 https://github.com/user-attachments/assets/d8ecbc95-cfbf-4340-8405-2814a03739c5
 
+## Requirements
+
+- PHP 8.2+
+- Laravel 11.28+
+- Filament 3.x or 4.x
+- Tailwind CSS 4.x (when using Filament 4.x)
 
 ## Installation
 

composer.json

@@ -20,8 +20,8 @@
         }
     ],
     "require": {
-        "php": "^8.1",
-        "filament/filament": "^3.0",
+        "php": "^8.2",
+        "filament/filament": "^4.0",
         "spatie/laravel-package-tools": "^1.15.0"
     },
     "require-dev": {

package.json

@@ -2,25 +2,24 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev:styles": "npx tailwindcss -i resources/css/index.css -o resources/dist/filament-theme-inspector.css --postcss --watch",
+        "dev:styles": "npx @tailwindcss/cli -i resources/css/index.css -o resources/dist/filament-theme-inspector.css --watch",
         "dev:scripts": "node bin/build.js --dev",
-        "build:styles": "npx tailwindcss -i resources/css/index.css -o resources/dist/filament-theme-inspector.css --postcss --minify && npm run purge",
+        "build:styles": "npx @tailwindcss/cli -i resources/css/index.css -o resources/dist/filament-theme-inspector.css --minify && npm run purge",
         "build:scripts": "node bin/build.js",
         "purge": "filament-purge -i resources/dist/filament-theme-inspector.css -o resources/dist/filament-theme-inspector.css -v 3.x",
         "dev": "npm-run-all --parallel dev:*",
         "build": "npm-run-all build:*"
     },
     "devDependencies": {
-        "@awcodes/filament-plugin-purge": "^1.1.1",
-        "@tailwindcss/forms": "^0.5.4",
-        "@tailwindcss/typography": "^0.5.9",
-        "autoprefixer": "^10.4.14",
+        "@awcodes/filament-plugin-purge": "^1.1.2",
+        "@tailwindcss/cli": "^4.1.13",
+        "@tailwindcss/postcss": "^4.0.0",
         "esbuild": "^0.19.2",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.26",
         "postcss-import": "^15.1.0",
         "prettier": "^2.7.1",
         "prettier-plugin-tailwindcss": "^0.1.13",
-        "tailwindcss": "^3.3.3"
+        "tailwindcss": "^4.1.13"
     }
-}
+}

postcss.config.cjs

@@ -2,7 +2,6 @@ module.exports = {
     plugins: {
         "postcss-import": {},
         "tailwindcss/nesting": {},
-        tailwindcss: {},
-        autoprefixer: {},
+        "@tailwindcss/postcss": {},
     },
 }

resources/css/index.css

@@ -1,28 +1,45 @@
-@import '../../vendor/filament/filament/resources/css/theme.css';
+@import "tailwindcss";
+
+@source './src/**/*.php';
+@source './resources/js/**/*.js';
+@source './resources/views/**/*.blade.php';
 
 .theme-inspector-container {
     @apply fixed z-[9999] items-center hidden gap-2 bg-transparent;
 }
 
-.theme-inspector-container > div {
-    @apply flex items-center px-[10px] py-[5px] pl-[10px] pr-[7px] overflow-hidden bg-white rounded-[5px] ring-1 ring-gray-950/5 whitespace-nowrap dark:divide-white/5 dark:bg-gray-900 dark:ring-white/10;
+.theme-inspector-container>div {
+    @apply flex items-center px-[10px] py-[5px] pl-[10px] pr-[7px] overflow-hidden bg-gray-400 rounded-[5px] ring-1 ring-gray-950/5 whitespace-nowrap dark:divide-white/5 dark:bg-gray-700 dark:ring-white/10;
     font-size: 12px;
 }
 
 .theme-inspector-container.is-visible {
     @apply flex;
 }
 
-.theme-inspector-container > div > .class-text {
+.theme-inspector-container>div>.class-text {
     @apply text-black dark:text-gray-200 me-3 font-semibold;
 }
 
-.theme-inspector-container > div > button {
-    @apply p-[0.1rem] transition duration-300 ease-in-out bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-opacity-60;
+.theme-inspector-container>div>button {
+    @apply p-1 transition duration-300 ease-in-out bg-gray-100 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-800/60;
     border-radius: 0.2rem;
 
 }
 
-.theme-inspector-container > div > button > svg {
-    @apply fill-none;
+.theme-inspector-container>div>button>svg {
+    @apply fill-none text-white;
+}
+
+
+.theme-inspector-container .fi-btn-icon {
+    @apply h-5 w-5;
+}
+
+.theme-inspector-container .copy-icon {
+    @apply text-white;
+}
+
+.theme-inspector-container .copied-icon {
+    @apply text-green-500;
 }

resources/js/copyable.js

@@ -7,12 +7,12 @@ export function createCopyableItem(text) {
   textNode.textContent = text;
 
   const copyIcon = `
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="fi-btn-icon h-5 w-5 text-gray-400">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="fi-btn-icon copy-btn">
             <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
         </svg>`;
 
   const checkmarkSVG = `
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="green" class="fi-btn-icon h-5 w-5">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="fi-btn-icon copied-icon">
             <path stroke-linecap="round" stroke-linejoin="round" d="M5 12l5 5L19 7" />
         </svg>`;