Laravel 9.x Compatibility

composer.json

@@ -1,26 +1,26 @@
 {
-  "name": "laravel-frontend-presets/tailwindcss",
-  "description": "Laravel frontend preset for Tailwind CSS",
-  "keywords": [
-    "laravel",
-    "preset",
-    "tailwindcss"
-  ],
-  "license": "MIT",
-  "require": {
-    "laravel/framework": "^8.0",
-    "laravel/ui": "^3.0"
-  },
-  "autoload": {
-    "psr-4": {
-      "LaravelFrontendPresets\\TailwindCssPreset\\": "src/"
+    "name": "laravel-frontend-presets/tailwindcss",
+    "description": "Laravel frontend preset for Tailwind CSS",
+    "keywords": [
+        "laravel",
+        "preset",
+        "tailwindcss"
+    ],
+    "license": "MIT",
+    "require": {
+        "laravel/framework": "^9.0",
+        "laravel/ui": "^3.4"
+    },
+    "autoload": {
+        "psr-4": {
+            "LaravelFrontendPresets\\TailwindCssPreset\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "LaravelFrontendPresets\\TailwindCssPreset\\TailwindCssPresetServiceProvider"
+            ]
+        }
     }
-  },
-  "extra": {
-    "laravel": {
-      "providers": [
-        "LaravelFrontendPresets\\TailwindCssPreset\\TailwindCssPresetServiceProvider"
-      ]
-    }
-  }
 }

src/TailwindCssPreset.php

@@ -29,13 +29,11 @@ public static function installAuth()
     protected static function updatePackageArray(array $packages)
     {
         return array_merge([
-            '@tailwindcss/ui' => '^0.3',
-            'autoprefixer' => '^9.6',
-            'laravel-mix' => '^5.0.1',
-            'postcss-import' => '^12.0',
-            'postcss-nested' => '^4.2',
-            'tailwindcss' => '^1.8',
-            'vue-template-compiler' => '^2.6.11',
+            '@tailwindcss/forms' => '^0.5',
+            'autoprefixer' => '^10.4.4',
+            'laravel-mix' => '^6.0.6',
+            'postcss' => '^8.4.14',
+            'tailwindcss' => '^3.0.23',
         ], Arr::except($packages, [
             'bootstrap',
             'bootstrap-sass',

src/tailwindcss-stubs/resources/css/app.css

@@ -1,5 +1,3 @@
-@import "tailwindcss/base";
-
-@import "tailwindcss/components";
-
-@import "tailwindcss/utilities";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/tailwindcss-stubs/resources/js/bootstrap.js

@@ -1,27 +1,14 @@
-window._ = require('lodash');
-
-/**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
- */
-
-// try {
-//     window.Popper = require('popper.js').default;
-//     window.$ = window.jQuery = require('jquery');
-
-//     require('bootstrap');
-// } catch (e) {}
+window._ = require("lodash");
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+window.axios = require("axios");
 
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
 
 /**
  * Echo exposes an expressive API for subscribing to channels and listening

src/tailwindcss-stubs/tailwind.config.js

@@ -1,13 +1,7 @@
 module.exports = {
-  purge: [
-    './resources/views/**/*.blade.php',
-    './resources/css/**/*.css',
-  ],
+  content: ["./resources/views/**/*.blade.php", "./resources/css/**/*.css"],
   theme: {
-    extend: {}
+    extend: {},
   },
-  variants: {},
-  plugins: [
-    require('@tailwindcss/ui'),
-  ]
-}
+  plugins: [require("@tailwindcss/forms")],
+};

src/tailwindcss-stubs/webpack.mix.js

@@ -1,4 +1,4 @@
-const mix = require('laravel-mix');
+const mix = require("laravel-mix");
 
 /*
  |--------------------------------------------------------------------------
@@ -12,15 +12,9 @@ const mix = require('laravel-mix');
  */
 
 mix
-  .js('resources/js/app.js', 'public/js')
-  .postCss('resources/css/app.css', 'public/css', [
-    require('postcss-import'),
-    require('tailwindcss'),
-    require('postcss-nested'),
-    require('autoprefixer'),
-  ]);
+  .js("resources/js/app.js", "public/js")
+  .postCss("resources/css/app.css", "public/css", [require("tailwindcss")]);
 
 if (mix.inProduction()) {
-  mix
-    .version();
+  mix.version();
 }