enhance(ui): upgrade tailwind & configures

darwis059 · Oct 13, 2022 · 1d30189 · 1d30189
1 parent 91ceae4
commit 1d30189
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,9 @@
         "@axe-core/playwright": "^4.4.4",
         "@capacitor/cli": "^4.0.0",
         "@playwright/test": "^1.24.2",
-        "@tailwindcss/ui": "0.7.2",
+        "@tailwindcss/forms": "0.5.3",
+        "@tailwindcss/typography": "0.5.7",
+        "@tailwindcss/aspect-ratio": "0.4.2",
         "@types/gulp": "^4.0.7",
         "cross-env": "^7.0.3",
         "cssnano": "^5.1.13",
@@ -17,16 +19,16 @@
         "ip": "1.1.8",
         "npm-run-all": "^4.1.5",
         "playwright": "^1.24.2",
-        "postcss": "8.4.16",
+        "postcss": "8.4.17",
         "postcss-cli": "10.0.0",
-        "postcss-import": "^15.0.0",
-        "postcss-import-ext-glob": "^2.0.1",
-        "postcss-nested": "5.0.6",
+        "postcss-import": "15.0.0",
+        "postcss-import-ext-glob": "2.0.1",
+        "postcss-nested": "6.0.0",
         "purgecss": "4.0.2",
         "shadow-cljs": "2.17.5",
         "stylelint": "^13.8.0",
         "stylelint-config-standard": "^20.0.0",
-        "tailwindcss": "2.2.16",
+        "tailwindcss": "3.1.8",
         "typescript": "^4.4.3"
     },
     "scripts": {

diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css
@@ -68,7 +68,7 @@
   .wrapper {
     @apply relative flex-shrink-0
     h-6 w-11 border-2 border-transparent flex
-    rounded-full cursor-pointer focus:outline-none focus:shadow-outline;
+    rounded-full cursor-pointer focus:outline-none;
   }
 
   .switcher {
@@ -313,7 +313,7 @@ html.is-mobile {
 
 .form-select {
   @apply block w-full pl-3 pr-10 py-2 text-base leading-6
-  border-gray-300 focus:outline-none focus:shadow-outline-blue sm:text-sm sm:leading-5;
+  border-gray-300 focus:outline-none sm:text-sm sm:leading-5;
 
   background-color: var(--ls-primary-background-color, transparent);
   background-repeat: no-repeat;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,49 +3,49 @@ const colors = require('tailwindcss/colors')
 function exposeColorsToCssVars({ addBase, theme }) {
   function extractColorVars(colorObj, colorGroup = '') {
     return Object.keys(colorObj).reduce((vars, colorKey) => {
-      const value = colorObj[colorKey];
+      const value = colorObj[colorKey]
 
       const newVars =
         typeof value === 'string'
           ? { [`--color${colorGroup}-${colorKey}`]: value }
-          : extractColorVars(value, `-${colorKey}`);
+          : extractColorVars(value, `-${colorKey}`)
 
-      return { ...vars, ...newVars };
-    }, {});
+      return { ...vars, ...newVars }
+    }, {})
   }
 
   addBase({
     ':root': extractColorVars(theme('colors')),
-  });
+  })
 }
 
 module.exports = {
-  mode: 'jit',
-  purge: {
-    content: [
-      './src/**/*.js',
-      './src/**/*.cljs',
-      './resources/**/*.html'
-    ],
-    safelist: [
-      "bg-black",
-      "bg-white",
-      "bg-gray-50",  "bg-red-50",  "bg-yellow-50",  "bg-green-50",  "bg-blue-50",  "bg-indigo-50",  "bg-orange-50",  "bg-rose-50",  "bg-purple-50",
-      "bg-gray-100", "bg-red-100", "bg-yellow-100", "bg-green-100", "bg-blue-100", "bg-indigo-100", "bg-orange-100", "bg-rose-100", "bg-purple-100", "bg-pink-100",
-      "bg-gray-200", "bg-red-200", "bg-yellow-200", "bg-green-200", "bg-blue-200", "bg-indigo-200", "bg-orange-200", "bg-rose-200", "bg-purple-200", "bg-pink-200",
-      "bg-gray-300", "bg-red-300", "bg-yellow-300", "bg-green-300", "bg-blue-300", "bg-indigo-300", "bg-orange-300", "bg-rose-300", "bg-purple-300", "bg-pink-300",
-      "bg-gray-400", "bg-red-400", "bg-yellow-400", "bg-green-400", "bg-blue-400", "bg-indigo-400", "bg-orange-400", "bg-rose-400", "bg-purple-400", "bg-pink-400",
-      "bg-gray-500", "bg-red-500", "bg-yellow-500", "bg-green-500", "bg-blue-500", "bg-indigo-500", "bg-orange-500", "bg-rose-500", "bg-purple-500", "bg-pink-500",
-      "bg-gray-600", "bg-red-600", "bg-yellow-600", "bg-green-600", "bg-blue-600", "bg-indigo-600", "bg-orange-600", "bg-rose-600", "bg-purple-600", "bg-pink-600",
-      "bg-gray-700", "bg-red-700", "bg-yellow-700", "bg-green-700", "bg-blue-700", "bg-indigo-700", "bg-orange-700", "bg-rose-700", "bg-purple-700", "bg-pink-700",
-      "bg-gray-800", "bg-red-800", "bg-yellow-800", "bg-green-800", "bg-blue-800", "bg-indigo-800", "bg-orange-800", "bg-rose-800", "bg-purple-800", "bg-pink-800",
-      "bg-gray-900", "bg-red-900", "bg-yellow-900", "bg-green-900", "bg-blue-900", "bg-indigo-900", "bg-orange-900", "bg-rose-900", "bg-purple-900", "bg-pink-900",
-    ]
-  },
-  plugins: [
-    require('@tailwindcss/ui'),
-    exposeColorsToCssVars],
   darkMode: 'class',
+  content: [
+    './src/**/*.js',
+    './src/**/*.cljs',
+    './resources/**/*.html'
+  ],
+  safelist: [
+    'bg-black',
+    'bg-white',
+    'bg-gray-50', 'bg-red-50', 'bg-yellow-50', 'bg-green-50', 'bg-blue-50', 'bg-indigo-50', 'bg-orange-50', 'bg-rose-50', 'bg-purple-50',
+    'bg-gray-100', 'bg-red-100', 'bg-yellow-100', 'bg-green-100', 'bg-blue-100', 'bg-indigo-100', 'bg-orange-100', 'bg-rose-100', 'bg-purple-100', 'bg-pink-100',
+    'bg-gray-200', 'bg-red-200', 'bg-yellow-200', 'bg-green-200', 'bg-blue-200', 'bg-indigo-200', 'bg-orange-200', 'bg-rose-200', 'bg-purple-200', 'bg-pink-200',
+    'bg-gray-300', 'bg-red-300', 'bg-yellow-300', 'bg-green-300', 'bg-blue-300', 'bg-indigo-300', 'bg-orange-300', 'bg-rose-300', 'bg-purple-300', 'bg-pink-300',
+    'bg-gray-400', 'bg-red-400', 'bg-yellow-400', 'bg-green-400', 'bg-blue-400', 'bg-indigo-400', 'bg-orange-400', 'bg-rose-400', 'bg-purple-400', 'bg-pink-400',
+    'bg-gray-500', 'bg-red-500', 'bg-yellow-500', 'bg-green-500', 'bg-blue-500', 'bg-indigo-500', 'bg-orange-500', 'bg-rose-500', 'bg-purple-500', 'bg-pink-500',
+    'bg-gray-600', 'bg-red-600', 'bg-yellow-600', 'bg-green-600', 'bg-blue-600', 'bg-indigo-600', 'bg-orange-600', 'bg-rose-600', 'bg-purple-600', 'bg-pink-600',
+    'bg-gray-700', 'bg-red-700', 'bg-yellow-700', 'bg-green-700', 'bg-blue-700', 'bg-indigo-700', 'bg-orange-700', 'bg-rose-700', 'bg-purple-700', 'bg-pink-700',
+    'bg-gray-800', 'bg-red-800', 'bg-yellow-800', 'bg-green-800', 'bg-blue-800', 'bg-indigo-800', 'bg-orange-800', 'bg-rose-800', 'bg-purple-800', 'bg-pink-800',
+    'bg-gray-900', 'bg-red-900', 'bg-yellow-900', 'bg-green-900', 'bg-blue-900', 'bg-indigo-900', 'bg-orange-900', 'bg-rose-900', 'bg-purple-900', 'bg-pink-900',
+  ],
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/aspect-ratio'),
+    exposeColorsToCssVars
+  ],
   theme: {
     extend: {
       fontSize: {