Update Tailwind to v3

Author: Mopolo

Makefile

@@ -25,5 +25,6 @@ prod-build:
 	cp public/favicon-16x16.png docs
 	cp public/favicon-32x32.png docs
 	cp public/favicon-96x96.png docs
+	node replace-css.js
 
 .PHONY: dev-setup dev-watch prod-setup prod-build

package-lock.json

@@ -1,20 +1,16 @@
 {
     "license": "MIT",
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
+        "dev": "mix",
         "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production"
+        "prod": "mix --production"
     },
     "devDependencies": {
-        "autoprefixer": "^10.0.2",
-        "browser-sync": "^2.26.13",
-        "browser-sync-webpack-plugin": "2.2.2",
-        "laravel-mix": "^6.0.6",
-        "postcss": "^8.1.14",
-        "tailwindcss": "^2.0.2"
+        "autoprefixer": "^10.4.4",
+        "browser-sync": "^2.27.10",
+        "browser-sync-webpack-plugin": "^2.3.0",
+        "laravel-mix": "^6.0.48",
+        "postcss": "^8.4.12",
+        "tailwindcss": "^3.0.23"
     }
 }

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    }
+}

postcss.config.js

@@ -0,0 +1,8 @@
+const fs = require("fs");
+const manifest = require('./public/mix-manifest.json');
+
+let indexHtml = fs.readFileSync('./docs/index.html', 'utf8');
+
+indexHtml = indexHtml.replace('/app.css', manifest['/app.css']);
+
+fs.writeFileSync('./docs/index.html', indexHtml);

replace-css.js

@@ -1,15 +1,15 @@
 const colors = require('tailwindcss/colors');
 
 module.exports = {
-    purge: [
+    content: [
         './public/**/*.html',
     ],
     darkMode: 'media', // or 'media' or 'class'
     theme: {
         colors: {
             white: colors.white,
             black: colors.black,
-            gray: colors.coolGray,
+            gray: colors.gray,
             orange: colors.orange,
             blue: colors.blue,
             logo: {
@@ -18,9 +18,5 @@ module.exports = {
                 300: '#cc9a60',
             }
         },
-    },
-    variants: {
-        extend: {},
-    },
-    plugins: [],
+    }
 }

tailwind.config.js

@@ -1,12 +1,11 @@
 const mix = require('laravel-mix');
 
-const tailwindcss = require('tailwindcss');
-
-mix.disableNotifications();
-
-mix.postCss('resources/css/app.css', 'public', [
-    tailwindcss('./tailwind.config.js')
-]);
+mix
+    .disableNotifications()
+    .setPublicPath('public/')
+    .postCss('resources/css/app.css', 'public', [
+        require('tailwindcss'),
+    ]);
 
 mix.browserSync({
     proxy: 'cuyz.test', // valet link
@@ -17,3 +16,7 @@ mix.browserSync({
         'public/index.html',
     ]
 });
+
+if (mix.inProduction()) {
+    mix.version();
+}