🆙 Tailwind v4 100% 🆙

Updated_Cms/resources/themes/dusk/css/app.scss

@@ -1,10 +1,18 @@
+@reference;
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer components {
     .dropdown-item {
-        @apply w-full text-left px-2 py-1 transition duration-200 ease-in-out text-sm hover:bg-[#8770b2];
+        width: 100%;
+        text-align: left;
+        padding: 0.5rem 0.5rem;
+        transition: all 200ms ease-in-out;
+        font-size: 0.875rem;
+        &:hover {
+            background-color: #8770b2;
+        }
     }
 }
 
@@ -21,11 +29,16 @@ body {
 }
 
 img {
+    // stylelint-disable-next-line property-no-unknown
     -webkit-user-drag: none;
+    // stylelint-disable-next-line property-no-unknown
     -khtml-user-drag: none;
+    // stylelint-disable-next-line property-no-unknown
     -moz-user-drag: none;
+    // stylelint-disable-next-line property-no-unknown
     -o-user-drag: none;
-    user-drag: none;
+    // Prevent text selection (standard property)
+    user-select: none;
     pointer-events: none;
 }
 

Updated_Cms/resources/themes/dusk/tailwind.config.cjs

@@ -1,5 +1,3 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
-
 module.exports = {
     content: [
         "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
@@ -11,17 +9,11 @@ module.exports = {
     theme: {
         extend: {
             fontFamily: {
-                sans: ["Nunito", ...defaultTheme.fontFamily.sans],
+                sans: ["Nunito", ...require("tailwindcss/defaultTheme").fontFamily.sans],
             },
         },
     },
 
-    variants: {
-        extend: {
-            opacity: ["disabled"],
-        },
-    },
-
     plugins: [
         require("@tailwindcss/forms"),
         require("@tailwindcss/typography"),

Updated_Cms/resources/themes/dusk/vite.config.js

@@ -1,10 +1,8 @@
 import { defineConfig } from "vite";
 import laravel from "laravel-vite-plugin";
 import path from "path";
-import tailwindcss from "tailwindcss";
+import tailwindcss from "@tailwindcss/postcss";
 import postcssImport from "postcss-import";
-import postcssNesting from "postcss-nesting";
-import tailwindcssNesting from "tailwindcss/nesting";
 import autoprefixer from "autoprefixer";
 
 export default defineConfig({
@@ -39,7 +37,6 @@ export default defineConfig({
         postcss: {
             plugins: [
                 postcssImport(),
-                tailwindcssNesting(postcssNesting()),
                 tailwindcss({
                     config: path.resolve(__dirname, "tailwind.config.cjs"),
                 }),