Upgrade to tailwind3

package.json

@@ -48,7 +48,7 @@
     "@babel/eslint-parser": "^7.15.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.15.0",
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.4.12",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
@@ -61,11 +61,11 @@
     "laravel-mix": "^6.0.27",
     "laravel-mix-bundle-analyzer": "^1.0.5",
     "laravel-mix-versionhash": "2.0.1",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.18",
     "resolve-url-loader": "^3.1.4",
     "sass": "^1.37.5",
     "sass-loader": "^10.2.0",
-    "tailwindcss": "^2.2.7",
+    "tailwindcss": "^3.1.8",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14"
   }

resources/js/components/Navbar.vue

@@ -3,14 +3,14 @@
     <div class="max-w-7xl mx-auto px-8">
       <div class="flex items-center justify-between h-16">
         <div class="flex items-center">
-          <router-link :to="{ name: user ? 'home' : 'welcome' }" class="flex-shrink-0 font-bold flex items-center">
+          <router-link :to="{ name: user ? 'home' : 'welcome' }" class="flex-shrink-0 font-semibold flex items-center">
             <img :src="asset('img/logo.svg')" alt="notion tools logo" class="w-10 h-10">
             <span
               class="ml-2 text-xl hidden sm:inline text-black dark:text-white"
             >
               {{ appName }}</span><span
-              class="bg-gray-100 font-semibold inline-block mb-4 ml-1 px-3 rounded-full text-black text-xs tracking-wider"
-            >Beta</span>
+              class="bg-gray-100 text-gray-600 font-semibold inline-block mb-4 ml-1 px-3 rounded-full text-black text-xs tracking-wider"
+            >BETA</span>
           </router-link>
           <workspace-dropdown class="ml-6" />
         </div>

tailwind.config.js

@@ -1,8 +1,8 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
+  mode: 'jit',
   important: true,
-  purge: {
   content: [
     './resources/**/*.blade.php',
     './resources/**/*.js',
@@ -13,16 +13,15 @@ module.exports = {
       /.*bg-(nt-blue|blue|gray|red|yellow|green).*/, // Buttons
       ...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat() // Alerts
     ]
-    }
   },
   darkMode: 'class', // or 'media' or 'class'
   theme: {
     extend: {
       keyframes: {
         'bonce-slow': {
-          '0%, 20%': { transform: 'translateY(0)' },
-          '8%': { transform: 'translateY(-25%)' },
-          '16%': { transform: 'translateY(+10%)' }
+          '0%, 20%': {transform: 'translateY(0)'},
+          '8%': {transform: 'translateY(-25%)'},
+          '16%': {transform: 'translateY(+10%)'}
         }
       },
       animation: {
@@ -71,15 +70,5 @@ module.exports = {
       }
     }
   },
-  variants: {
-    extend: {
-      animation: ['hover'],
-      brightness: ['hover', 'focus'],
-      invert: ['dark'],
-      maxWidth: ['hover'],
-      display: ['group-hover', 'dark'],
-      rotate: ['group-hover']
-    }
-  },
   plugins: []
 }

webpack.mix.js

@@ -13,7 +13,6 @@ mix
     processCssUrls: false,
     postCss: [tailwindcss('./tailwind.config.js')]
   })
-
   .disableNotifications()
 
 if (mix.inProduction()) {