Upgrade Frontend to Tailwind v3.

[capsloq]

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.

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: [], };

[Mcastres]

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