Modernize CSS

app/main.css

@@ -71,7 +71,8 @@ body {
 
 .checkbox > label::before {
   /* @apply bg-grey-10; */
-  @apply border;
+  border-width: 1px;
+
   @apply rounded-sm;
 
   content: '';
@@ -313,7 +314,8 @@ select {
 
   @screen md {
     .main > section {
-      @apply border;
+      border-width: 1px;
+
       @apply border-grey-80;
     }
   }

app/ui/account.js

@@ -89,7 +89,7 @@ class Account extends Component {
         />
         <ul
           id="accountMenu"
-          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50 dark:bg-grey-80"
+          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-nowrap outline-none z-50 dark:bg-grey-80"
           onblur="${e => this.hideMenu(e)}"
         >
           <li class="p-2 text-grey-60 dark:text-grey-50">${user.email}</li>

app/ui/downloadPassword.js

@@ -17,7 +17,7 @@ module.exports = function(state, emit) {
         ${state.translate('downloadDescription')}
       </p>
       <form
-        class="flex flex-row flex-no-wrap w-full md:w-4/5"
+        class="flex flex-row flex-nowrap w-full md:w-4/5"
         onsubmit="${checkPassword}"
         data-no-csrf
       >

package.json

@@ -67,7 +67,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.16.11",
     "@dannycoates/webcrypto-liner": "^0.1.37",
-    "@fullhuman/postcss-purgecss": "^1.3.0",
+    "@fullhuman/postcss-purgecss": "^4.1.3",
     "@mattiasbuelens/web-streams-polyfill": "0.2.1",
     "@sentry/browser": "^5.30.0",
     "asmcrypto.js": "^0.22.0",
@@ -79,9 +79,9 @@
     "core-js": "^3.21.1",
     "crc": "^3.8.0",
     "cross-env": "^6.0.3",
-    "css-loader": "^3.6.0",
+    "css-loader": "^5.2.7",
     "css-mqpacker": "^7.0.0",
-    "cssnano": "^4.1.11",
+    "cssnano": "^5.1.12",
     "eslint": "^6.6.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-mocha": "^6.2.1",
@@ -105,8 +105,9 @@
     "nanotiming": "^7.3.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^14.1.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.1",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^4.2.0",
+    "postcss-preset-env": "^7.7.2",
     "prettier": "^1.19.1",
     "proxyquire": "^2.1.3",
     "puppeteer": "^2.0.0",
@@ -120,7 +121,7 @@
     "stylelint-no-unsupported-browser-features": "^4.1.4",
     "svgo": "^2.8.0",
     "svgo-loader": "^3.0.1",
-    "tailwindcss": "^1.9.6",
+    "tailwindcss": "^2",
     "val-loader": "^1.1.1",
     "webpack": "4.38.0",
     "webpack-cli": "^3.3.12",

postcss.config.js

@@ -1,8 +1,6 @@
-class TailwindExtractor {
-  static extract(content) {
-    return content.match(/[A-Za-z0-9-_:/]+/g) || [];
-  }
-}
+const TailwindExtractor = content => {
+  return content.match(/[A-Za-z0-9-_:/]+/g) || [];
+};
 
 const options = {
   plugins: [

tailwind.config.js

@@ -23,6 +23,7 @@ const colors = {
 };
 
 module.exports = {
+  purge: false,
   theme: {
     colors: colors,
     screens: {

webpack.config.js

@@ -181,7 +181,8 @@ const web = {
             {
               loader: 'css-loader',
               options: {
-                importLoaders: 1
+                importLoaders: 1,
+                esModule: false
               }
             },
             'postcss-loader'