Update tailwindcss v2.0.3 JIT compiler

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.DS_Store

package.json

@@ -1,52 +1,56 @@
 {
-  "name": "windmill-dashboard",
-  "version": "1.0.2",
-  "description": "A multi theme, completely accessible, with components and pages examples, ready for production dashboard.",
-  "scripts": {
-    "tailwind": "tailwindcss build public/assets/css/tailwind.css -o public/assets/css/tailwind.output.css",
-    "build": "env NODE_ENV=production postcss public/assets/css/tailwind.css -o public/assets/css/tailwind.output.css",
-    "cz": "git-cz",
-    "release": "release-it"
-  },
-  "author": "Estevan Maito <[email protected]>",
-  "license": "MIT",
-  "devDependencies": {
-    "@release-it/conventional-changelog": "1.1.4",
-    "@tailwindcss/custom-forms": "0.2.1",
-    "autoprefixer": "9.8.0",
-    "color": "3.1.2",
-    "commitizen": "4.1.2",
-    "cssnano": "4.1.10",
-    "cz-conventional-changelog": "3.2.0",
-    "postcss-cli": "7.1.1",
-    "release-it": "13.6.4",
-    "tailwindcss": "1.4.6",
-    "tailwindcss-multi-theme": "1.0.3"
-  },
-  "keywords": [
-    "tailwind",
-    "windmill",
-    "dashboard",
-    "template",
-    "admin"
-  ],
-  "release-it": {
-    "github": {
-      "release": true
-    },
-    "npm": {
-      "publish": false
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": "angular",
-        "infile": "CHANGELOG.md"
-      }
-    }
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  }
+	"name": "windmill-dashboard",
+	"version": "2.0.0",
+	"description": "A multi theme, completely accessible, with components and pages examples, ready for production dashboard.",
+	"scripts": {
+		"prod": "tailwindcss -i public/assets/css/tailwind.css -o public/assets/css/tailwind.output.css --minify",
+		"dev": "tailwindcss -i public/assets/css/tailwind.css -o public/assets/css/tailwind.output.css --watch",
+		"watch": "TAILWIND_MODE=watch postcss public/assets/css/tailwind.css -o public/assets/css/tailwind.output.css --verbose -w",
+		"cz": "git-cz",
+		"release": "release-it"
+	},
+	"author": "Estevan Maito <[email protected]>",
+	"license": "MIT",
+	"devDependencies": {
+		"@release-it/conventional-changelog": "^4.3.0",
+		"@tailwindcss/forms": "^0.5.0",
+		"@tailwindcss/typography": "^0.5.2",
+		"autoprefixer": "^10.4.4",
+		"color": "^4.2.3",
+		"commitizen": "^4.2.4",
+		"cssnano": "^5.1.7",
+		"cz-conventional-changelog": "^3.3.0",
+		"postcss": "^8.4.12",
+		"postcss-cli": "^9.1.0",
+		"release-it": "14.14.2",
+		"tailwindcss": "^3.0.24",
+		"tailwindcss-multi-theme": "^1.0.4"
+	},
+	"keywords": [
+		"tailwind",
+		"windmill",
+		"dashboard",
+		"template",
+		"admin"
+	],
+	"release-it": {
+		"github": {
+			"release": true
+		},
+		"npm": {
+			"publish": false
+		},
+		"plugins": {
+			"@release-it/conventional-changelog": {
+				"preset": "angular",
+				"infile": "CHANGELOG.md"
+			}
+		}
+	},
+	"config": {
+		"commitizen": {
+			"path": "./node_modules/cz-conventional-changelog"
+		}
+	},
+	"dependencies": {}
 }

postcss.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-    require('cssnano')({
-      preset: 'default',
-    }),
-  ],
+	plugins: {
+		'tailwindcss': {},
+		autoprefixer: {},
+		cssnano: {
+			preset: 'default'
+		}
+	}
 }

public/assets/css/tailwind.css

@@ -1,3 +1,29 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	/* width */
+	::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	/* Track */
+	::-webkit-scrollbar-track {
+		background: #f1f1f1;
+	}
+
+	/* Handle */
+	::-webkit-scrollbar-thumb {
+		background: #888;
+	}
+
+	/* Handle on hover */
+	::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+}
+
+input {
+	@apply bg-gray-100;
+}

public/assets/js/init-alpine.js

@@ -1,62 +1,75 @@
+const bodyTag = document.querySelector('html');
+
 function data() {
-  function getThemeFromLocalStorage() {
-    // if user already changed the theme, use it
-    if (window.localStorage.getItem('dark')) {
-      return JSON.parse(window.localStorage.getItem('dark'))
-    }
+	function getThemeFromLocalStorage() {
+		// if user already changed the theme, use it
+		if (window.localStorage.getItem('dark')) {
+			return JSON.parse(window.localStorage.getItem('dark'))
+		}
+
+		// else return their preferences
+		return (
+			!!window.matchMedia &&
+			window.matchMedia('(prefers-color-scheme: dark)').matches
+		)
+	}
+
+	function setThemeToLocalStorage(value) {
+		window.localStorage.setItem('dark', value)
+	}
 
-    // else return their preferences
-    return (
-      !!window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-    )
-  }
+	function setTheme(value) {
+		if (value) {
+			bodyTag.classList.add('dark');
+		} else {
+			bodyTag.classList.remove('dark');
+		}
+	}
 
-  function setThemeToLocalStorage(value) {
-    window.localStorage.setItem('dark', value)
-  }
+	setTheme(getThemeFromLocalStorage());
 
-  return {
-    dark: getThemeFromLocalStorage(),
-    toggleTheme() {
-      this.dark = !this.dark
-      setThemeToLocalStorage(this.dark)
-    },
-    isSideMenuOpen: false,
-    toggleSideMenu() {
-      this.isSideMenuOpen = !this.isSideMenuOpen
-    },
-    closeSideMenu() {
-      this.isSideMenuOpen = false
-    },
-    isNotificationsMenuOpen: false,
-    toggleNotificationsMenu() {
-      this.isNotificationsMenuOpen = !this.isNotificationsMenuOpen
-    },
-    closeNotificationsMenu() {
-      this.isNotificationsMenuOpen = false
-    },
-    isProfileMenuOpen: false,
-    toggleProfileMenu() {
-      this.isProfileMenuOpen = !this.isProfileMenuOpen
-    },
-    closeProfileMenu() {
-      this.isProfileMenuOpen = false
-    },
-    isPagesMenuOpen: false,
-    togglePagesMenu() {
-      this.isPagesMenuOpen = !this.isPagesMenuOpen
-    },
-    // Modal
-    isModalOpen: false,
-    trapCleanup: null,
-    openModal() {
-      this.isModalOpen = true
-      this.trapCleanup = focusTrap(document.querySelector('#modal'))
-    },
-    closeModal() {
-      this.isModalOpen = false
-      this.trapCleanup()
-    },
-  }
+	return {
+		dark: getThemeFromLocalStorage(),
+		toggleTheme() {
+			this.dark = !this.dark
+			setTheme(this.dark);
+			setThemeToLocalStorage(this.dark)
+		},
+		isSideMenuOpen: false,
+		toggleSideMenu() {
+			this.isSideMenuOpen = !this.isSideMenuOpen
+		},
+		closeSideMenu() {
+			this.isSideMenuOpen = false
+		},
+		isNotificationsMenuOpen: false,
+		toggleNotificationsMenu() {
+			this.isNotificationsMenuOpen = !this.isNotificationsMenuOpen
+		},
+		closeNotificationsMenu() {
+			this.isNotificationsMenuOpen = false
+		},
+		isProfileMenuOpen: false,
+		toggleProfileMenu() {
+			this.isProfileMenuOpen = !this.isProfileMenuOpen
+		},
+		closeProfileMenu() {
+			this.isProfileMenuOpen = false
+		},
+		isPagesMenuOpen: false,
+		togglePagesMenu() {
+			this.isPagesMenuOpen = !this.isPagesMenuOpen
+		},
+		// Modal
+		isModalOpen: false,
+		trapCleanup: null,
+		openModal() {
+			this.isModalOpen = true
+			this.trapCleanup = focusTrap(document.querySelector('#modal'))
+		},
+		closeModal() {
+			this.isModalOpen = false
+			this.trapCleanup()
+		},
+	}
 }