From 1d301899a179327374041485581b1ad292b1bd09 Mon Sep 17 00:00:00 2001 From: charlie Date: Mon, 10 Oct 2022 12:18:53 +0800 Subject: [PATCH] enhance(ui): upgrade tailwind & configures --- package.json | 14 ++++++---- src/main/frontend/ui.css | 4 +-- tailwind.config.js | 60 ++++++++++++++++++++-------------------- 3 files changed, 40 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 4c4c72b868a..4082a93d80e 100644 --- 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 index 7e984ec3bdb..044f6ae0d41 100644 --- 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 index ceaa7d5edda..f90389c4185 100644 --- 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: {