Tailwind 3

css/package.json

@@ -5,12 +5,11 @@
         "//": "`gradle css`"
     },
     "dependencies": {
-        "autoprefixer": "^9.8.6",
-        "cssnano": "^4.1.10",
-        "postcss-cli": "^7.1.1",
-        "postcss-hash": "^2.0.0",
-        "postcss-import": "^12.0.1",
-        "postcss-nested": "^4.2.3",
-        "tailwindcss": "^1.5.1"
+        "autoprefixer": "^10.4.14",
+        "cssnano": "^6.0.1",
+        "postcss-cli": "^10.1.0",
+        "postcss-hash": "^3.0.0",
+        "postcss-import": "^15.1.0",
+        "tailwindcss": "^3.3.2"
     }
 }

css/postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
     plugins: [
         require('postcss-import'),
-        require('postcss-nested'),
+        require('tailwindcss/nesting'),
         require('tailwindcss'),
         require('autoprefixer'),
         require('cssnano')({

css/src/button.pcss

@@ -2,7 +2,7 @@
     @apply font-semibold py-2 px-4 rounded;
 
     &:focus {
-        @apply outline-none shadow-outline;
+        @apply outline-none ring;
     }
 
     &:hover {

css/src/other.pcss

@@ -2,7 +2,7 @@
     @apply italic font-semibold text-sm bg-teal-500 text-gray-900 rounded-full py-1 px-2 align-middle;
 
     &:focus {
-        @apply outline-none shadow-outline bg-teal-800 text-white;
+        @apply outline-none ring bg-teal-800 text-white;
     }
 
     &:hover {

css/tailwind.config.js

@@ -1,9 +1,7 @@
 module.exports = {
-    purge: {
-        content: [
-            process.env.PURGE
-        ]
-    },
+    content: [
+        process.env.PURGE
+    ],
     theme: {
         fontFamily: {
             'sans': [