From d6facc7438df49b2266cbe0947e20e6d92643f2f Mon Sep 17 00:00:00 2001
From: Thomas Knickman <tknickman@gmail.com>
Date: Thu, 16 Dec 2021 12:43:48 -0500
Subject: [PATCH] chore(blog-starter-typescript): update tailwindcss to v3
 (#32579)

Updates the [blog-starter-typescript](https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript) example to use the new [tailwindcss v3](https://tailwindcss.com/blog/tailwindcss-v3) by following the [upgrade guide](https://tailwindcss.com/docs/upgrade-guide).

Removes out-dated `tailwind.config.js` theme customizations for simplicity in favor of tailwind defaults (some were one-to-one mappings)

Thanks!

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 examples/blog-starter-typescript/README.md    |  4 +--
 .../components/alert.tsx                      |  8 ++---
 .../components/cover-image.tsx                |  4 +--
 .../components/footer.tsx                     |  4 +--
 .../components/hero-post.tsx                  |  2 +-
 .../components/intro.tsx                      |  4 +--
 .../components/more-stories.tsx               |  2 +-
 .../components/post-title.tsx                 |  2 +-
 .../components/section-separator.tsx          |  2 +-
 examples/blog-starter-typescript/package.json |  6 ++--
 .../blog-starter-typescript/styles/index.css  | 12 -------
 .../tailwind.config.js                        | 32 ++-----------------
 12 files changed, 21 insertions(+), 61 deletions(-)

diff --git a/examples/blog-starter-typescript/README.md b/examples/blog-starter-typescript/README.md
index b74a6e5ad721a..15856d06a4942 100644
--- a/examples/blog-starter-typescript/README.md
+++ b/examples/blog-starter-typescript/README.md
@@ -36,6 +36,4 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
 
 # Notes
 
-This blog-starter-typescript uses [Tailwind CSS](https://tailwindcss.com). To control the generated stylesheet's filesize, this example uses Tailwind CSS' v2.0 [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.
-
-[Tailwind CSS v2.0 no longer supports Node.js 8 or 10](https://tailwindcss.com/docs/upgrading-to-v2#upgrade-to-node-js-12-13-or-higher). To build your CSS you'll need to ensure you are running Node.js 12.13.0 or higher in both your local and CI environments.
+`blog-starter-typescript` uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3).
diff --git a/examples/blog-starter-typescript/components/alert.tsx b/examples/blog-starter-typescript/components/alert.tsx
index f804ff6192868..067672f380826 100644
--- a/examples/blog-starter-typescript/components/alert.tsx
+++ b/examples/blog-starter-typescript/components/alert.tsx
@@ -10,8 +10,8 @@ const Alert = ({ preview }: Props) => {
   return (
     <div
       className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+        'bg-neutral-800 border-neutral-800 text-white': preview,
+        'bg-neutral-50 border-neutral-200': !preview,
       })}
     >
       <Container>
@@ -21,7 +21,7 @@ const Alert = ({ preview }: Props) => {
               This page is a preview.{' '}
               <a
                 href="/api/exit-preview"
-                className="underline hover:text-cyan duration-200 transition-colors"
+                className="underline hover:text-teal-300 duration-200 transition-colors"
               >
                 Click here
               </a>{' '}
@@ -32,7 +32,7 @@ const Alert = ({ preview }: Props) => {
               The source code for this blog is{' '}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
-                className="underline hover:text-success duration-200 transition-colors"
+                className="underline hover:text-blue-600 duration-200 transition-colors"
               >
                 available on GitHub
               </a>
diff --git a/examples/blog-starter-typescript/components/cover-image.tsx b/examples/blog-starter-typescript/components/cover-image.tsx
index 6497d4c1bb85a..78def80024126 100644
--- a/examples/blog-starter-typescript/components/cover-image.tsx
+++ b/examples/blog-starter-typescript/components/cover-image.tsx
@@ -12,8 +12,8 @@ const CoverImage = ({ title, src, slug }: Props) => {
     <img
       src={src}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn('shadow-sm', {
+        'hover:shadow-lg transition-shadow duration-200': slug,
       })}
     />
   )
diff --git a/examples/blog-starter-typescript/components/footer.tsx b/examples/blog-starter-typescript/components/footer.tsx
index e8a7fdce4cd0d..d2bcba33363b6 100644
--- a/examples/blog-starter-typescript/components/footer.tsx
+++ b/examples/blog-starter-typescript/components/footer.tsx
@@ -3,10 +3,10 @@ import { EXAMPLE_PATH } from '../lib/constants'
 
 const Footer = () => {
   return (
-    <footer className="bg-accent-1 border-t border-accent-2">
+    <footer className="bg-neutral-50 border-t border-neutral-200">
       <Container>
         <div className="py-28 flex flex-col lg:flex-row items-center">
-          <h3 className="text-4xl lg:text-5xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
+          <h3 className="text-4xl lg:text-[2.5rem] font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
             Statically Generated with Next.js.
           </h3>
           <div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
diff --git a/examples/blog-starter-typescript/components/hero-post.tsx b/examples/blog-starter-typescript/components/hero-post.tsx
index cd0f121c01faa..2a2df94d6f3af 100644
--- a/examples/blog-starter-typescript/components/hero-post.tsx
+++ b/examples/blog-starter-typescript/components/hero-post.tsx
@@ -28,7 +28,7 @@ const HeroPost = ({
       </div>
       <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
-          <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
+          <h3 className="mb-4 text-4xl lg:text-5xl leading-tight">
             <Link as={`/posts/${slug}`} href="/posts/[slug]">
               <a className="hover:underline">{title}</a>
             </Link>
diff --git a/examples/blog-starter-typescript/components/intro.tsx b/examples/blog-starter-typescript/components/intro.tsx
index a0df29f0673e1..d41e6fb1b994d 100644
--- a/examples/blog-starter-typescript/components/intro.tsx
+++ b/examples/blog-starter-typescript/components/intro.tsx
@@ -3,14 +3,14 @@ import { CMS_NAME } from '../lib/constants'
 const Intro = () => {
   return (
     <section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
-      <h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
+      <h1 className="text-5xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
         A statically generated blog example using{' '}
         <a
           href="https://nextjs.org/"
-          className="underline hover:text-success duration-200 transition-colors"
+          className="underline hover:text-blue-600 duration-200 transition-colors"
         >
           Next.js
         </a>{' '}
diff --git a/examples/blog-starter-typescript/components/more-stories.tsx b/examples/blog-starter-typescript/components/more-stories.tsx
index 1c2c038266e23..5433d210b35d5 100644
--- a/examples/blog-starter-typescript/components/more-stories.tsx
+++ b/examples/blog-starter-typescript/components/more-stories.tsx
@@ -8,7 +8,7 @@ type Props = {
 const MoreStories = ({ posts }: Props) => {
   return (
     <section>
-      <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
+      <h2 className="mb-8 text-5xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
       <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
diff --git a/examples/blog-starter-typescript/components/post-title.tsx b/examples/blog-starter-typescript/components/post-title.tsx
index 9be522052767e..74dc0fdb10aa9 100644
--- a/examples/blog-starter-typescript/components/post-title.tsx
+++ b/examples/blog-starter-typescript/components/post-title.tsx
@@ -6,7 +6,7 @@ type Props = {
 
 const PostTitle = ({ children }: Props) => {
   return (
-    <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
+    <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
   )
diff --git a/examples/blog-starter-typescript/components/section-separator.tsx b/examples/blog-starter-typescript/components/section-separator.tsx
index 2787cea58dcd3..5205e528e4554 100644
--- a/examples/blog-starter-typescript/components/section-separator.tsx
+++ b/examples/blog-starter-typescript/components/section-separator.tsx
@@ -1,5 +1,5 @@
 const SectionSeparator = () => {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-neutral-200 mt-28 mb-24" />
 }
 
 export default SectionSeparator
diff --git a/examples/blog-starter-typescript/package.json b/examples/blog-starter-typescript/package.json
index 4ddf0e92bf33c..96c0f3882ba9e 100644
--- a/examples/blog-starter-typescript/package.json
+++ b/examples/blog-starter-typescript/package.json
@@ -22,8 +22,8 @@
     "@types/node": "^15.6.0",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
-    "autoprefixer": "^10.2.5",
-    "postcss": "^8.3.0",
-    "tailwindcss": "^2.1.2"
+    "autoprefixer": "10.4.0",
+    "postcss": "8.4.5",
+    "tailwindcss": "3.0.5"
   }
 }
diff --git a/examples/blog-starter-typescript/styles/index.css b/examples/blog-starter-typescript/styles/index.css
index 719e6c05b0d76..b5c61c956711f 100644
--- a/examples/blog-starter-typescript/styles/index.css
+++ b/examples/blog-starter-typescript/styles/index.css
@@ -1,15 +1,3 @@
 @tailwind base;
-
-/* Write your own custom base styles here */
-
-/* Start purging... */
 @tailwind components;
-/* Stop purging. */
-
-/* Write you own custom component styles here */
-
-/* Start purging... */
 @tailwind utilities;
-/* Stop purging. */
-
-/* Your own custom utilities */
diff --git a/examples/blog-starter-typescript/tailwind.config.js b/examples/blog-starter-typescript/tailwind.config.js
index d7d1c3ee7f005..1052670289409 100644
--- a/examples/blog-starter-typescript/tailwind.config.js
+++ b/examples/blog-starter-typescript/tailwind.config.js
@@ -1,33 +1,7 @@
 module.exports = {
-  purge: ['./components/**/*.tsx', './pages/**/*.tsx'],
+  content: ['./components/**/*.tsx', './pages/**/*.tsx'],
   theme: {
-    extend: {
-      colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
-      },
-      spacing: {
-        28: '7rem',
-      },
-      letterSpacing: {
-        tighter: '-.04em',
-      },
-      lineHeight: {
-        tight: 1.2,
-      },
-      fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
-      },
-      boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
-      },
-    },
+    extend: {},
   },
+  plugins: [],
 }