build(tailwind): upgrade tailwind to v3.1.6

[hussamkhatib]

Description (by @hussamkhatib)

• Use lookup tables to assign dynamic value for theme.
  reason : Tailwind no longer uses PurgeCSS under the hood.
  deleted the purgeCSSgenerator script as well.
  alternative: use inline styles

eg: ${mapColor600[theme]} instead of bg-${theme}-500

• remove variants from tailwind config as every variant is automatically available for every utility by default.
• use jit syntax for less used classes eg use min-h-[80vh] instead of extending the class in theme
• use newer classes
  eg flex-shrink-0 to shrink-0
• remove redundant classes
  eg transform scale-50 to scale-50

Other Updates (by @gupta-ji6)

1. Fixed the following warning by updating next.config.js

Warning warn - Disabled SWC because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled

2. Fixed following warning while running next start by adding sharp as dependency.

Warning Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production

[prateek3255]

Sorry for responding so late, we missed reviewing this PR

[prateek3255]

@hussamkhatib You would need to run the purge script as well with the dev command, so that all the styles that can be detected by tailwind are generated during development time as well (right now it only happens during build) because of the way JIT works. You can test it out yourself, by clearing the theme/purgeFile.ts file or adding a new style with theme that hasn't been used before and you'll see that the styles are not being applied during development.

You can use a combination of nodemon to watch for file changes and run the purgableCSSGenerator script and concurrently to run it in conjunction with next dev

[gupta-ji6]

@all-contributors please add @hussamkhatib for code, design, maintenance

[allcontributors]

@gupta-ji6

I've put up a pull request to add @hussamkhatib! 🎉

[hussamkhatib]

Upgraded tailwind to 3.1
New Changes add

• First-party TypeScript types
• Arbitrary values but for variants
  Not sure If this is required or not , let me know If I have to rollback.
  New Change
  
  Old
  

@prateek3255 @gupta-ji6

[gupta-ji6]

hey @hussamkhatib, thanks for taking out time & upgrading it again. Looking forward to merging this.

By the way, I got this warning from tailwind building your PR.

warn - The `@variants` directive has been deprecated in Tailwind CSS v3.0.
warn - Use `@layer utilities` or `@layer components` instead.
warn - https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer

see if we can accommodate the same in this PR. The documentation link provides how to resolve it. I tried resolving it & committed. See the build works properly once in your local too after taking a pull.

Rest LGTM 🚀

// @prateek3255

[hussamkhatib]

I am not able to create a production build.
It is failing at line 240 lib/issues.tsx
I think I will need to get API keys from Strapi

[gupta-ji6]

I am not able to create a production build.

It is failing at line 240 lib/issues.tsx

I think I will need to get API keys from Strapi

oh yes, no worries. @prateek3255 will check once.

[prateek3255]

Other than that I tested the production build and everything seems to be working fine. After this small change we can bring this in I believe 🚀

[gupta-ji6]

hey @hussamkhatib 👋🏻 ,
we have deployed your contributions to production today, thank you so much for working on it. Apologies for the long delay in it too.

Also, you can find yourself now on our contributor's list. Cheers 🥂