foodadvisor icon indicating copy to clipboard operation
foodadvisor copied to clipboard

Upgrade Frontend to Tailwind v3.

Open capsloq opened this issue 2 years ago • 1 comments

I tried upgrading to Tailwind v3 which basically works but it interferes with the button text color for example on the homepage CTA "Browse Restaurants" becomes low contrast. image

My upgrade process was minior changes in two files according to tailwind upgrade guide:

  1. package.json ... "devDependencies": { "autoprefixer": "^10.4.2", "postcss": "^8.4.8", "tailwindcss": "^3.0.23" }

  2. tailwind.config.js module.exports = { // mode: 'jit', content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], darkMode: 'class', // or 'media' or 'class' theme: { extend: { colors: { primary: { DEFAULT: '#e27d60', light: '#e48a6f', darker: '#cb7056', text: '#FFFFFF', lightest: '#f0beaf', }, secondary: { DEFAULT: '#41b3a3', light: '#85dcb', darker: '#3aa192', text: '#FFFFFF', lightest: '#ecf7f5', }, muted: { DEFAULT: '#E5E7EB', light: '#F3F4F6', darker: '#D1D5DB', text: '#555b66', }, }, }, }, // variants: { // extend: { // // ... // ringWidth: ['hover', 'active'], // }, // }, plugins: [], };

capsloq avatar Mar 07 '22 15:03 capsloq

In fact, it seems that upgrading to 3.0.0 cause the color config to break. I will investigate on this

Mcastres avatar Oct 10 '22 13:10 Mcastres