Update node dependencies

package.json

@@ -10,18 +10,18 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "@tailwindcss/forms": "^0.3.3",
+        "@tailwindcss/forms": "^0.4.0",
-        "@tailwindcss/typography": "^0.4.1",
+        "@tailwindcss/typography": "^0.5.1",
-        "alpinejs": "^3.4.1",
+        "alpinejs": "^3.9.0",
-        "autoprefixer": "^10.3.6",
+        "autoprefixer": "^10.4.2",
-        "axios": "^0.21.4",
+        "axios": "^0.25.0",
         "cross-env": "^7.0",
-        "laravel-mix": "^6.0.31",
+        "laravel-mix": "^6.0.41",
         "lodash": "^4.17.21",
         "postcss-import": "^14.0.2",
         "quill": "^1.3.7",
-        "resolve-url-loader": "^4.0.0",
+        "resolve-url-loader": "^5.0.0",
-        "tailwindcss": "^2.2.16",
+        "tailwindcss": "^3.0.22",
         "vue-template-compiler": "^2.6.14"
     },
     "dependencies": {

resources/views/components/auth-session-status.blade.php

@@ -1,7 +1,7 @@
 @props(['status'])
 
 @if ($status)
-    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
+    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-emerald-600']) }}>
         {{ $status }}
     </div>
 @endif

resources/views/components/button-link/green.blade.php

@@ -1,3 +1,3 @@
-<x-button-link.base :attributes="$attributes" class="text-white bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300">
+<x-button-link.base :attributes="$attributes" class="text-white bg-emerald-800 hover:bg-emerald-700 active:bg-emerald-900 focus:border-emerald-900 ring-emerald-300">
     {{ $slot }}
 </x-button-link.base>

resources/views/components/dropdown.blade.php

@@ -28,11 +28,11 @@ switch ($width) {
 
     <div x-show="open"
             x-transition:enter="transition ease-out duration-200"
-            x-transition:enter-start="transform opacity-0 scale-95"
+            x-transition:enter-start="opacity-0 scale-95"
-            x-transition:enter-end="transform opacity-100 scale-100"
+            x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-75"
-            x-transition:leave-start="transform opacity-100 scale-100"
+            x-transition:leave-start="opacity-100 scale-100"
-            x-transition:leave-end="transform opacity-0 scale-95"
+            x-transition:leave-end="opacity-0 scale-95"
             class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
             style="display: none;"
             @click="open = false">

resources/views/components/ingredient-picker.blade.php

@@ -26,7 +26,7 @@
             <div class="absolute border-2 border-gray-500 border-b-0 bg-white"
                  x-bind="ingredient">
                 <template x-for="result in results" :key="result.id">
-                    <div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer" x-bind:data-id="result.id">
+                    <div class="p-1 border-b-2 border-gray-500 hover:bg-amber-300 cursor-pointer" x-bind:data-id="result.id">
                         <div class="pointer-events-none">
                             <div>
                                 <span class="font-bold" x-text="result.name"></span><span class="text-gray-600" x-text="', ' + result.detail" x-show="result.detail"></span>

resources/views/components/inputs/icon-green.blade.php

@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center border border-transparent rounded-md font-semibold text-xs text-green-500 tracking-widest hover:text-green-700 active:text-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
+<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center border border-transparent rounded-md font-semibold text-xs text-emerald-500 tracking-widest hover:text-emerald-700 active:text-emerald-900 focus:outline-none focus:border-emerald-900 focus:ring ring-emerald-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
     {{ $slot }}
 </button>

resources/views/components/tagger.blade.php

@@ -1,4 +1,4 @@
-<div x-data data-tags="{{ $defaultTags ?? '[]' }}">
+<div x-data data-tags="{!! $defaultTags ?? '[]' !!}">
     <div x-data="tagSelect()" @click.outside="clearSearch()" @keydown.escape="clearSearch()">
         <div class="relative" @keydown.enter.prevent="addTag(searchTerm)">
             <x-inputs.input type="hidden"

resources/views/foods/delete.blade.php

@@ -25,7 +25,7 @@
                 @endif
                 @if(!$food->ingredientAmountRelationships->isEmpty())
                     <div class="flex space-x-2 items-center text-lg">
-                        <div class="text-yellow-500">
+                        <div class="text-amber-500">
                             <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                 <path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
                             </svg>

resources/views/journal-entries/index.blade.php

@@ -125,7 +125,7 @@
                                          :selectedValue="$currentGoal?->id ?? null">
                         </x-inputs.select>
                         <div class="flex items-center justify-start mt-4">
-                            <x-inputs.button class="bg-green-800 hover:bg-green-700">Change Goal</x-inputs.button>
+                            <x-inputs.button class="bg-emerald-800 hover:bg-emerald-700">Change Goal</x-inputs.button>
                             <x-button-link.red class="ml-3" x-on:click="showGoalChangeForm = !showGoalChangeForm">
                                 Cancel
                             </x-button-link.red>

resources/views/layouts/app.blade.php

@@ -41,7 +41,7 @@
         <!-- Page Content -->
         <main>
             @if(session()->has('message'))
-                <div class="bg-green-200 p-2 mb-2">
+                <div class="bg-emerald-200 p-2 mb-2">
                     {{ session()->get('message') }}
                 </div>
             @endif

resources/views/recipes/delete.blade.php

@@ -13,7 +13,7 @@
             <div class="flex flex-col space-y-2 mt-2 text-lg">
                 @if(!$recipe->ingredientAmountRelationships->isEmpty())
                     <div class="flex space-x-2 items-center text-lg">
-                        <div class="text-yellow-500">
+                        <div class="text-amber-500">
                             <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                 <path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
                             </svg>

resources/views/recipes/edit.blade.php

@@ -133,7 +133,7 @@
                 </div>
             </div>
             <x-inputs.button type="button"
-                             class="bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300"
+                             class="bg-emerald-800 hover:bg-emerald-700 active:bg-emerald-900 focus:border-emerald-900 ring-emerald-300"
                              x-on:click="addNodeFromTemplate($refs.ingredients, 'ingredient');">
                 Add Ingredient
             </x-inputs.button>
@@ -158,7 +158,7 @@
                 </div>
             </div>
             <x-inputs.button type="button"
-                             class="bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300"
+                             class="bg-emerald-800 hover:bg-emerald-700 active:bg-emerald-900 focus:border-emerald-900 ring-emerald-300"
                              x-on:click="addNodeFromTemplate($refs.steps, 'step');">
                 Add Step
             </x-inputs.button>

tailwind.config.js

@@ -1,9 +1,8 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-    mode: 'jit',
 
-    purge: [
+    content: [
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
     ],
@@ -16,12 +15,6 @@ module.exports = {
         },
     },
 
-    variants: {
-        extend: {
-            opacity: ['disabled'],
-        },
-    },
-
     plugins: [
         require('@tailwindcss/typography'),
         require('@tailwindcss/forms')