build(tailwind): upgrade tailwind to v3.1.6 (#88)

hussamkhatib · gupta-ji6 · hussamkhatib · web-flow · commit d7f1036ccce4 · 2022-08-06T21:14:41.000+05:30
* upgrade: tailwind to v3 remove purgeCSS and use lookup table for dynamic classes. * upgrade tailwind to 3.1.6 (#87) * fix(global.css): replace @Variants with @layer * chore(package): bump release version * fix(next.config): resolve warning - Disabled SWC because of custom Babel configuration ".babelrc" * build(sharp): added sharp for image optimization in prod https://nextjs.org/docs/messages/sharp-missing-in-production * style: rollback to arbitary values for variants to normal classes * refactor: remove babel config as it is not required Co-authored-by: Ayush Gupta <ayushgupta197@gmail.com> Co-authored-by: hussamkhatib <hussamkhatib@gmail.com>
diff --git a/.babelrc b/.babelrc
diff --git a/components/Curators.tsx b/components/Curators.tsx
@@ -76,14 +76,14 @@ function Curators(): JSX.Element {
             return (
               <div className="flex sm:flex-col md:flex-row flex-wrap pb-8" key={index}>
                 <div
-                  className={`flex-shrink-1 mr-4 mb-4 p-1 bg-gradient-to-br from-${theme}-300 to-${theme}-700 rounded transition duration-300`}
+                  className={`shrink mr-4 mb-4 p-1 bg-gradient-to-br from-${theme}-300 to-${theme}-700 rounded transition duration-300`}
                 >
                   <div className={`bg-${theme}-100 p-1 rounded`}>
                     <a
                       href={curator.links.website}
                       target="_blank"
                       rel="noreferrer"
-                      className="flex transform transition duration-700 hover:scale-105"
+                      className="flex transition duration-700 hover:scale-105"
                       aria-label={`Open ${curator.name} website.`}
                     >
                       <Image
diff --git a/components/DevOfTheWeekItem.tsx b/components/DevOfTheWeekItem.tsx
@@ -21,7 +21,7 @@ const DevOfTheWeekItem = ({
             href={profileLink.website}
             target="_blank"
             rel="noreferrer"
-            className="flex transform transition duration-700 hover:scale-105"
+            className="flex transition duration-700 hover:scale-105"
             aria-label={name}
           >
             <Image
diff --git a/components/FeatureSection.tsx b/components/FeatureSection.tsx
@@ -54,7 +54,7 @@ const FeatureSection = (): JSX.Element => {
   const theme = useThemeState();
   return (
     <div className="py-12">
-      <div className="max-w-screen-2xl mx-auto px-8 sm:px-16 md:px-40 lg:px-64">
+      <div className="px-8 mx-auto max-w-screen-2xl sm:px-16 md:px-40 lg:px-64">
         <div className="lg:text-center">
           <Text
             additionalStyles="pt-2 text-3xl leading-8 font-extrabold tracking-wide sm:text-4xl md:text-5xl sm:leading-10 text-shadow"
@@ -81,7 +81,7 @@ const FeatureSection = (): JSX.Element => {
                 <li key={feature.name} className="py-4 pr-4 lg:pr-8 mb-4 flex justify-center">
                   <div className="flex">
                     <div
-                      className={`flex flex-shrink-0 items-center justify-center h-16 w-16 rounded-md text-${theme}-100 bg-gradient-to-br from-${theme}-600 to-${theme}-800 transition-all hover:animate-spring-bounce`}
+                      className={`flex shrink-0 items-center justify-center h-16 w-16 rounded-md text-${theme}-100 bg-gradient-to-br from-${theme}-600 to-${theme}-800 transition-all hover:animate-spring-bounce`}
                     >
                       {feature.icon}
                     </div>
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -23,7 +23,7 @@ const Footer = (): JSX.Element => {
       <footer
         className={`flex mt-auto justify-between px-16 lg:px-32 py-5 bg-gradient-to-b from-${theme}-100 to-${theme}-300 flex-col lg:flex-row`}
       >
-        <div className="flex items-center flex-shrink-0 lg:mr-6 flex-col lg:flex-row">
+        <div className="flex items-center shrink-0 lg:mr-6 flex-col lg:flex-row">
           <Link href="/">
             <a aria-current="page" className="hover:no-underline flex items-center pb-3 lg:pb-0">
               <ScriptifiedLogo color={`text-${theme}-900`} additionalStyles="w-6 h-6" />
@@ -40,7 +40,7 @@ const Footer = (): JSX.Element => {
         </div>
 
         <div className="flex items-center flex-col lg:flex-row">
-          <ul className="flex px-8 items-center justify-center m-0 flex-wrap ">
+          <ul className="flex px-8 items-center justify-center m-0 flex-wrap">
             <li className="p-0">
               <Link href="/">
                 <a className="hover:underline text-pom p-2 inline-flex items-center">
diff --git a/components/Quiz.tsx b/components/Quiz.tsx
@@ -79,8 +79,8 @@ const Option = ({
   const DEFAULT_BACKGROUND = `bg-gradient-to-br from-${theme}-100 to-${theme}-200`;
   const DEFAULT_BORDER = `border-${theme}-300`;
 
-  const CORRECT_ANSWER_BACKGROUND = `bg-gradient-to-br from-green-100 to-green-300 transition-none transform-none`;
-  const CORRECT_ANSWER_BORDER = `border-green-700`;
+  const CORRECT_ANSWER_BACKGROUND = `bg-gradient-to-br from-emarald-100 to-emerald-300 transition-none transform-none`;
+  const CORRECT_ANSWER_BORDER = `border-emerald-700`;
 
   const WRONG_ANSWER_BACKGROUND = 'bg-gradient-to-br from-red-100 to-red-300 transition-none transform-none';
   const WRONG_ANSWER_BORDER = 'border-red-700';
@@ -99,7 +99,7 @@ const Option = ({
   const background = isShowingDetailView ? answeredBackground : DEFAULT_BACKGROUND;
   const border = isShowingDetailView ? answeredBorder : normalBorder;
   const additionalStyles = !(isDisabled || isShowingDetailView)
-    ? `cursor-pointer ${HOVER_BORDER} transition-all transform ease-in-out duration-500 hover:scale-105 focus:scale-105`
+    ? `cursor-pointer ${HOVER_BORDER} transition-all ease-in-out duration-500 hover:scale-105 focus:scale-105`
     : '';
 
   const handleSelect = () => {
@@ -118,7 +118,7 @@ const Option = ({
       {isShowingDetailView && (
         <>
           {isCorrectAnswer ? (
-            <CheckCircleIcon color="text-green-500 absolute top-1/2 left-1" />
+            <CheckCircleIcon color="text-emerald-500 absolute top-1/2 left-1" />
           ) : (
             <XCircleIcon color="text-red-500 absolute top-1/2 left-1" />
           )}
diff --git a/components/ToolItem.tsx b/components/ToolItem.tsx
@@ -9,7 +9,7 @@ const ToolItem = ({ tool: { title, url, logo, authors, desc, tags } }: { tool: T
     <div className="flex flex-wrap sm:flex-nowrap flex-row items-center">
       <a
         href={url}
-        className="w-full mr-8 max-w-fc my-4 p-1 transform transition duration-700 hover:scale-105 img-shadow-sm hover:img-shadow-none"
+        className="w-full mr-8 max-w-[fit-content] my-4 p-1 transition duration-700 hover:scale-105 img-shadow-sm hover:img-shadow-none"
         target="_blank"
         rel="noreferrer"
         aria-label={title}
diff --git a/components/common/Button.tsx b/components/common/Button.tsx
@@ -30,7 +30,7 @@ function Button({
     <button className={styles} onClick={onClick} {...buttonAttributes} disabled={loading}>
       {loading && (
         <svg
-          className="animate-spin -ml-1 mr-3 h-6 w-6 flex-shrink-0 text-white mt-1"
+          className="animate-spin -ml-1 mr-3 h-6 w-6 shrink-0 text-white mt-1"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
diff --git a/components/common/FloatingShareButton.tsx b/components/common/FloatingShareButton.tsx
@@ -66,7 +66,7 @@ const FloatingShareButton = ({ url = '', title = '' }: FloatingShareButtonProps)
       style={{ opacity: btnOpacity }}
     >
       <button
-        className={`animate-spin-slow transition duration-500 ease-in-out transform hover:scale-110 rounded-full p-4 inline-flex items-center justify-center`}
+        className={`animate-spin-slow transition duration-500 ease-in-out hover:scale-110 rounded-full p-4 inline-flex items-center justify-center`}
         onClick={shareExternal}
       >
         <ShareIcon color={`text-${theme}-100`} />
diff --git a/components/common/IssueListItem.tsx b/components/common/IssueListItem.tsx
@@ -12,7 +12,7 @@ const IssueListItem = ({ issueData }: { issueData: Meta }): JSX.Element => {
   return (
     <div className={`flex py-8 pr-2 max-w-3xl md:border-0 border-b border-${theme}-500`} key={number}>
       <div className="h-full flex md:flex-row flex-col items-start">
-        <div className="w-24 flex-shrink-0 flex-grow flex md:flex-col text-center leading-none mb-2">
+        <div className="w-24 shrink-0 grow flex md:flex-col text-center leading-none mb-2">
           <span className={`text-${theme}-700 text-lg md:mr-0 mr-2 font-bold md:order-2 uppercase`}>Issue</span>
           <span
             // eslint-disable-next-line max-len
diff --git a/components/common/SocialShare.tsx b/components/common/SocialShare.tsx
@@ -27,7 +27,7 @@ export const ShareLink = ({ text, label, url, icon, showText }: ShareLinkProps):
     <a
       aria-label={label}
       href={url}
-      className="transition duration-500 ease-in-out transform hover:scale-125"
+      className="transition duration-500 ease-in-out hover:scale-125"
       target="_blank"
       rel="noreferrer"
     >
@@ -129,7 +129,7 @@ const SocialShare = ({
       {copyLink ? (
         <button
           aria-label="Copy link to clipboard"
-          className="transition duration-500 ease-in-out transform hover:scale-125"
+          className="transition duration-500 ease-in-out hover:scale-125"
           onClick={copyLinkToClipBoard}
         >
           {copyBtnText === 'Copy Link' ? (
@@ -143,7 +143,7 @@ const SocialShare = ({
       {showShareBtn ? (
         <button
           aria-label="Share"
-          className="hidden lg:inline-block transition duration-500 ease-in-out transform hover:scale-125"
+          className="hidden lg:inline-block transition duration-500 ease-in-out hover:scale-125"
           onClick={shareExternal}
         >
           <ShareIcon color={`text-${theme}-500`} />
diff --git a/components/common/Text.tsx b/components/common/Text.tsx
@@ -1,6 +1,6 @@
 import { TextType } from '../../theme/theme';
 
-// Example usage - <Text type="base" color="text-green-500"> Hello World </Text>
+// Example usage - <Text type="base" color="text-emerald-500"> Hello World </Text>
 const Text = ({
   size = 'md',
   as = 'p',
diff --git a/components/common/ThemePicker.tsx b/components/common/ThemePicker.tsx
@@ -143,7 +143,7 @@ const ThemePicker = ({ textColor }: { textColor: string }): JSX.Element => {
             onClick={() => setIsThemeSelectorOpen(!isThemeSelectorOpen)}
           >
             <div className="animate-morph flex items-center space-x-3">
-              <span className={`animate-spin-slow flex-shrink-0 h-6 w-6 rounded-full bg-${currentTheme}-500`} />
+              <span className={`animate-spin-slow shrink-0 h-6 w-6 rounded-full bg-${currentTheme}-500`} />
               <span className="block truncate">{THEME_ALIAS[currentTheme]}</span>
             </div>
             <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
@@ -189,7 +189,7 @@ const ThemePicker = ({ textColor }: { textColor: string }): JSX.Element => {
                 >
                   <div className="animate-morph flex items-center space-x-3">
                     <span
-                      className={`animate-spin-slow flex-shrink-0 h-6 w-6 rounded-full bg-${theme}-500 border-2 border-white`}
+                      className={`animate-spin-slow shrink-0 h-6 w-6 rounded-full bg-${theme}-500 border-2 border-white`}
                     />
                     <span
                       className={`${currentTheme === theme ? 'font-semibold' : 'font-normal'} hidden sm:block truncate`}
diff --git a/next.config.js b/next.config.js
@@ -10,7 +10,7 @@ const withPWA = require('next-pwa');
 const runtimeCaching = require('next-pwa/cache');
 
 const nextConfig = withPWA({
-  swcMinify: true,
+  swcMinify: true, // opt-in to use the Next.js compiler for minification
   pwa: {
     dest: 'public',
     register: true, // let this plugin register service worker for you
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scriptified",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": true,
   "license": "(MIT OR Apache-2.0)",
   "scripts": {
@@ -13,23 +13,24 @@
   },
   "dependencies": {
     "@svgr/webpack": "5.4.0",
-    "autoprefixer": "10.3.6",
+    "autoprefixer": "10.4.0",
     "axios": "0.21.2",
     "glob": "7.1.6",
     "lodash": "4.17.21",
     "next": "12.0.0",
     "next-pwa": "3.1.5",
-    "postcss": "8.3.8",
+    "postcss": "8.4.4",
     "postcss-import": "12.0.1",
     "prism-react-renderer": "1.1.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-markdown": "5.0.3",
     "react-player": "2.6.1",
-    "tailwindcss": "2.2.16"
+    "sharp": "0.30.7",
+    "tailwindcss": "3.1.6"
   },
   "devDependencies": {
-    "@types/gtag.js": "^0.0.4",
+    "@types/gtag.js": "0.0.4",
     "@types/node": "14.6.3",
     "@types/react": "17.0.3",
     "@typescript-eslint/eslint-plugin": "3.10.1",
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -13,7 +13,10 @@ import { useThemeState } from '../theme/ThemeContext';
 export default function Custom404({ allIssuesData }: { allIssuesData: Meta[] }): JSX.Element {
   const theme = useThemeState();
   return (
-    <Layout additionalStyles={`pt-4 bg-hero bg-${theme}-500`} title={`${siteConfig.name} | Page Not Found`}>
+    <Layout
+      additionalStyles={`pt-4 bg-[url(/hero-pattern.svg)] bg-${theme}-500`}
+      title={`${siteConfig.name} | Page Not Found`}
+    >
       <Head>
         <title>{`${siteConfig.name} - Page Not Found`}</title>
       </Head>
diff --git a/pages/500.tsx b/pages/500.tsx
@@ -13,7 +13,10 @@ import { useThemeState } from '../theme/ThemeContext';
 export default function Custom500({ allIssuesData }: { allIssuesData: Meta[] }): JSX.Element {
   const theme = useThemeState();
   return (
-    <Layout additionalStyles={`pt-4 bg-hero bg-${theme}-500`} title={`${siteConfig.name} | Server-side error occurred`}>
+    <Layout
+      additionalStyles={`pt-4 bg-[url(/hero-pattern.svg)] bg-${theme}-500`}
+      title={`${siteConfig.name} | Server-side error occurred`}
+    >
       <Head>
         <title>{`${siteConfig.name} - Server-side error occurred`}</title>
       </Head>
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -17,14 +17,14 @@ export default function Home({ allIssuesData }: { allIssuesData: Meta[] }): JSX.
     <Layout home>
       <section
         id="section"
-        className={`text-lg flex flex-col bg-${theme}-500 bg-hero items-center leading-normal pb-4 px-4 relative`}
+        className={`text-lg flex flex-col bg-${theme}-500 bg-[url(/hero-pattern.svg)] items-center leading-normal pb-4 px-4 relative`}
       >
         <HeroSection />
       </section>
       <section className={`mx-auto px-8 sm:px-16 md:px-40 lg:px-64 text-lg leading-normal py-16 bg-${theme}-100`}>
         <LatestIssues allIssuesData={allIssuesData} />
       </section>
-      <section className={`bg-${theme}-500 bg-texture`}>
+      <section className={`bg-${theme}-500 bg-[url(/texture.svg)]`}>
         <FeatureSection />
       </section>
       <section className={`bg-${theme}-100`}>
diff --git a/pages/thanks.tsx b/pages/thanks.tsx
@@ -13,7 +13,7 @@ export default function ThankYou(): JSX.Element {
       title={`Thank You | ${siteConfig.name}`}
       additionalStyles={`pt-12 min-h-screen bg-gradient-to-b from-${theme}-100 to-${theme}-300`}
     >
-      <section className="min-h-80 max-w-4xl px-8 sm:px-8 md:px-8 lg:px-8 mx-auto text-lg leading-normal pt-16">
+      <section className="min-h-[80vh] max-w-4xl px-8 sm:px-8 md:px-8 lg:px-8 mx-auto text-lg leading-normal pt-16">
         <Text size="4xl" as="h1" color={`text-${theme}-900`} additionalStyles="text-4xl pb-8 text-center">
           Thank you for subscribing to Scriptified!
         </Text>
diff --git a/styles/global.css b/styles/global.css
@@ -85,30 +85,26 @@
 }
 
 @layer utilities {
-  @variants responsive {
-    .text-shadow {
-      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-    }
-    .text-shadow-md {
-      text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
-    }
-    .text-shadow-lg {
-      text-shadow: 15px 15px 30px rgba(0, 0, 0, 0.5);
-    }
-    .text-shadow-none {
-      text-shadow: none;
-    }
+  .text-shadow {
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
   }
-  @variants hover {
-    .img-shadow {
-      filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.3));
-    }
-    .img-shadow-sm {
-      filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.3));
-    }
-    .img-shadow-none {
-      filter: none;
-    }
+  .text-shadow-md {
+    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
+  }
+  .text-shadow-lg {
+    text-shadow: 15px 15px 30px rgba(0, 0, 0, 0.5);
+  }
+  .text-shadow-none {
+    text-shadow: none;
+  }
+  .img-shadow {
+    filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.3));
+  }
+  .img-shadow-sm {
+    filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.3));
+  }
+  .img-shadow-none {
+    filter: none;
   }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,9 +1,6 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  mode: 'jit',
-  purge: {
-    enabled: process.env.NODE_ENV !== 'development',
-    content: ['./components/**/*.tsx', './pages/**/*.tsx', './theme/*.ts'],
-  },
+  content: ['./components/**/*.tsx', './pages/**/*.tsx', './theme/*.ts'],
   theme: {
     extend: {
       fontFamily: {
@@ -28,17 +25,6 @@ module.exports = {
         1: '1rem',
         6: '1.5rem',
       },
-      maxWidth: {
-        fc: 'fit-content',
-      },
-      minHeight: {
-        50: '50vh',
-        80: '80vh',
-      },
-      backgroundImage: {
-        hero: 'url(/hero-pattern.svg)',
-        texture: 'url(/texture.svg)',
-      },
       colors: {
         current: 'currentColor',
         orange: {
@@ -106,14 +92,4 @@ module.exports = {
       },
     },
   },
-  variants: {
-    margin: ['responsive', 'first', 'hover', 'focus'],
-    padding: ['responsive', 'first', 'hover', 'focus'],
-    backgroundColor: ['responsive', 'first', 'hover', 'focus', 'active'],
-    fill: ['responsive', 'hover', 'focus'],
-    display: ['responsive', 'hover', 'focus', 'group-hover', 'group-focus'],
-    animation: ['responsive', 'motion-safe', 'motion-reduce', 'hover', 'focus'],
-    transitionProperty: ['responsive', 'motion-safe', 'motion-reduce'],
-    transformOrigin: ['hover', 'focus'],
-  },
 };
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ const DevOfTheWeekItem = ({`
`21`	`21`	`href={profileLink.website}`
`22`	`22`	`target="_blank"`
`23`	`23`	`rel="noreferrer"`
`24`		`- className="flex transform transition duration-700 hover:scale-105"`
	`24`	`+ className="flex transition duration-700 hover:scale-105"`
`25`	`25`	`aria-label={name}`
`26`	`26`	`>`
`27`	`27`	`<Image`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ const FloatingShareButton = ({ url = '', title = '' }: FloatingShareButtonProps)`
`66`	`66`	`style={{ opacity: btnOpacity }}`
`67`	`67`	`>`
`68`	`68`	`<button`
`69`		- className={`animate-spin-slow transition duration-500 ease-in-out transform hover:scale-110 rounded-full p-4 inline-flex items-center justify-center`}
	`69`	+ className={`animate-spin-slow transition duration-500 ease-in-out hover:scale-110 rounded-full p-4 inline-flex items-center justify-center`}
`70`	`70`	`onClick={shareExternal}`
`71`	`71`	`>`
`72`	`72`	<ShareIcon color={`text-${theme}-100`} />