Merge branch 'canary' into jp/rust-caching

vercel · Dec 16, 2021 · 2ce41fa · 2ce41fa
2 parents 09b8a03 + d6facc7
commit 2ce41fa
Show file tree

Hide file tree

Showing 12 changed files with 21 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: [],
 }