Merge pull request #295 from timlrx/upgrade/tailwind-3

feat: upgrade to tailwind 3.0
2021-12-15 18:08:39 +08:00
parent 004ac216bb 791d3b1e38
commit fef93840ea
6 changed files with 47 additions and 193 deletions
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea

 ## Features

- Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2) and primary color attribute
+- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute
 - Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
 - Lightweight, 45kB first load JS, uses Preact in production build
 - Mobile-friendly view
@@ -72,10 +72,13 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 ## Quick Start Guide

 1. JS (official support)
+
 ```bash
 npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git
 ```
+
    or TS (community support)
+
 ```bash
 npx degit timlrx/tailwind-nextjs-starter-blog#typescript
 ```
@@ -94,7 +97,9 @@ First, run the development server:
 ```bash
 npm start
 ```
+
    or
+
 ```bash
 npm run dev
 ```
--- a/data/blog/introducing-tailwind-nextjs-starter-blog.mdx
+++ b/data/blog/introducing-tailwind-nextjs-starter-blog.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'Introducing Tailwind Nextjs Starter Blog'
 date: '2021-01-12'
-lastmod: '2021-11-14'
+lastmod: '2021-12-15'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
@@ -42,7 +42,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea

 ## Features

- Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2) and primary color attribute
+- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute
 - Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
 - Lightweight, 45kB first load JS, uses Preact in production build
 - Mobile-friendly view
--- a/data/blog/new-features-in-v1.mdx
+++ b/data/blog/new-features-in-v1.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'New features in v1'
 date: 2021-08-07T15:32:14Z
-lastmod: '2021-11-14'
+lastmod: '2021-12-15'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
@@ -27,7 +27,7 @@ You can easily modify the theme color by changing the primary attribute in the t
 theme: {
    colors: {
      primary: colors.teal,
-      gray: colors.trueGray,
+      gray: colors.neutral,
      ...
    }
  ...
@@ -38,7 +38,7 @@ The primary color attribute should be assigned an object with keys from 50, 100,

 Tailwind includes great default color palettes that can be used for theming your own website. Check out [customizing colors documentation page](https://tailwindcss.com/docs/customizing-colors) for the full range of options.

-Migrating from v1? You can revert to the previous theme by setting `primary` to `colors.sky` (Tailwind 2.2.2 and above, otherwise `colors.lightBlue`) and changing gray to `colors.coolGray`.
+Migrating from v1? You can revert to the previous theme by setting `primary` to `colors.sky` (Tailwind 2.2.2 and above, otherwise `colors.lightBlue`) and changing gray to `colors.gray`.

 From v1.1.2+, you can also customize the style of your code blocks easily by modifying the `css/prism.css` stylesheet. Token classnames are compatible with prismjs
 so you can copy and adapt token styles from a prismjs stylesheet e.g. [prism themes](https://github.com/PrismJS/prism-themes).
--- a/package-lock.json
+++ b/package-lock.json
@@ -2167,17 +2167,17 @@
      }
    },
    "@tailwindcss/forms": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.4.tgz",
-      "integrity": "sha512-vlAoBifNJUkagB+PAdW4aHMe4pKmSLroH398UPgIogBFc91D2VlHUxe4pjxQhiJl0Nfw53sHSJSQBSTQBZP3vA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
+      "integrity": "sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==",
      "requires": {
        "mini-svg-data-uri": "^1.2.3"
      }
    },
    "@tailwindcss/typography": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.4.1.tgz",
-      "integrity": "sha512-ovPPLUhs7zAIJfr0y1dbGlyCuPhpuv/jpBoFgqAc658DWGGrOBWBMpAWLw2KlzbNeVk4YBJMzue1ekvIbdw6XA==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.0.tgz",
+      "integrity": "sha512-1p/3C6C+JJziS/ghtG8ACYalbA2SyLJY27Pm33cVTlAoY6VQ7zfm2H64cPxUMBkVIlWXTtWHhZcZJPobMRmQAA==",
      "requires": {
        "lodash.castarray": "^4.4.0",
        "lodash.isplainobject": "^4.0.6",
@@ -3645,11 +3645,6 @@
        "randomfill": "^1.0.3"
      }
    },
-    "css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA="
-    },
    "css-select": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@@ -3686,11 +3681,6 @@
        }
      }
    },
-    "css-unit-converter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
-    },
    "css-what": {
      "version": "3.4.2",
      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -5373,16 +5363,6 @@
      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
    },
-    "fs-extra": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
-      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
-      "requires": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      }
-    },
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -5797,11 +5777,6 @@
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
    },
-    "hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
-    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -5812,21 +5787,6 @@
        "minimalistic-crypto-utils": "^1.0.1"
      }
    },
-    "hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4="
-    },
-    "hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg="
-    },
-    "html-tags": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg=="
-    },
    "html-void-elements": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz",
@@ -6139,19 +6099,6 @@
      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w=="
    },
-    "is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-      "requires": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
-      }
-    },
    "is-core-module": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
@@ -6427,15 +6374,6 @@
        "minimist": "^1.2.0"
      }
    },
-    "jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
-      }
-    },
    "jsx-ast-utils": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz",
@@ -6619,7 +6557,8 @@
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
    },
    "lodash.castarray": {
      "version": "4.4.0",
@@ -6647,11 +6586,6 @@
      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
    },
-    "lodash.topath": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak="
-    },
    "lodash.truncate": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -7708,11 +7642,6 @@
      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
    },
-    "modern-normalize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
-      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA=="
-    },
    "moo": {
      "version": "0.5.1",
      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
@@ -7984,14 +7913,6 @@
      "integrity": "sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==",
      "optional": true
    },
-    "node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "requires": {
-        "lodash": "^4.17.21"
-      }
-    },
    "node-fetch": {
      "version": "2.6.1",
      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -8493,9 +8414,9 @@
      }
    },
    "postcss": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
-      "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
      "requires": {
        "nanoid": "^3.1.30",
        "picocolors": "^1.0.0",
@@ -8530,9 +8451,9 @@
      }
    },
    "postcss-selector-parser": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
-      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.7.tgz",
+      "integrity": "sha512-U+b/Deoi4I/UmE6KOVPpnhS7I7AYdKbhGcat+qTQ27gycvaACvNEw11ba6RrkwVmDVRW7sigWgLj4/KbbJjeDA==",
      "requires": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -8589,11 +8510,6 @@
        "fast-diff": "^1.1.2"
      }
    },
-    "pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
-    },
    "prismjs": {
      "version": "1.25.0",
      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
@@ -8683,24 +8599,6 @@
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
    },
-    "purgecss": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
-      "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
-      "requires": {
-        "commander": "^8.0.0",
-        "glob": "^7.1.7",
-        "postcss": "^8.3.5",
-        "postcss-selector-parser": "^6.0.6"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "8.3.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
-        }
-      }
-    },
    "q": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -8849,22 +8747,6 @@
      "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.3.0.tgz",
      "integrity": "sha512-RJ8J5O6UvrclfZpcPSPuKusrdRfoY7uXXoYOOdeswZNtSkQaewT3919yz6RyloDBR+iwcUyz5zGOUjhgvfuv3g=="
    },
-    "reduce-css-calc": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
-      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "requires": {
-        "css-unit-converter": "^1.1.1",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-        }
-      }
-    },
    "refractor": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/refractor/-/refractor-4.3.0.tgz",
@@ -9185,16 +9067,6 @@
      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
      "dev": true
    },
-    "rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE="
-    },
-    "rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
-    },
    "rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -10061,40 +9933,29 @@
      }
    },
    "tailwindcss": {
-      "version": "2.2.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
-      "integrity": "sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.2.tgz",
+      "integrity": "sha512-i1KpjYnGYftjzdAth6jA5iMPjhxpUkk5L6DafhfnQs+KiiWaThYxmk47Weh4oFH1mZqP6MuiQNHxtoRVPOraLg==",
      "requires": {
        "arg": "^5.0.1",
-        "bytes": "^3.0.0",
        "chalk": "^4.1.2",
        "chokidar": "^3.5.2",
-        "color": "^4.0.1",
+        "color-name": "^1.1.4",
        "cosmiconfig": "^7.0.1",
        "detective": "^5.2.0",
        "didyoumean": "^1.2.2",
        "dlv": "^1.1.3",
        "fast-glob": "^3.2.7",
-        "fs-extra": "^10.0.0",
-        "glob-parent": "^6.0.1",
-        "html-tags": "^3.1.0",
-        "is-color-stop": "^1.1.0",
-        "is-glob": "^4.0.1",
-        "lodash": "^4.17.21",
-        "lodash.topath": "^4.5.2",
-        "modern-normalize": "^1.1.0",
-        "node-emoji": "^1.11.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
        "normalize-path": "^3.0.0",
        "object-hash": "^2.2.0",
        "postcss-js": "^3.0.3",
        "postcss-load-config": "^3.1.0",
        "postcss-nested": "5.0.6",
        "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0",
-        "pretty-hrtime": "^1.0.3",
-        "purgecss": "^4.0.3",
+        "postcss-value-parser": "^4.2.0",
        "quick-lru": "^5.1.1",
-        "reduce-css-calc": "^2.1.8",
        "resolve": "^1.20.0",
        "tmp": "^0.2.1"
      },
@@ -10141,15 +10002,6 @@
            }
          }
        },
-        "color": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/color/-/color-4.1.0.tgz",
-          "integrity": "sha512-o2rkkxyLGgYoeUy1OodXpbPAQNmlNBrirQ8ODO8QutzDiDMNdezSOZLNnusQ6pUpCQJUsaJIo9DZJKqa2HgH7A==",
-          "requires": {
-            "color-convert": "^2.0.1",
-            "color-string": "^1.9.0"
-          }
-        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -10501,11 +10353,6 @@
        "unist-util-is": "^5.0.0"
      }
    },
-    "universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-    },
    "unpipe": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -13,9 +13,9 @@
  },
  "dependencies": {
    "@mailchimp/mailchimp_marketing": "^3.0.58",
-    "@tailwindcss/forms": "^0.3.2",
-    "@tailwindcss/typography": "^0.4.0",
-    "autoprefixer": "^10.2.5",
+    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.0",
+    "autoprefixer": "^10.4.0",
    "esbuild": "^0.13.13",
    "github-slugger": "^1.3.0",
    "gray-matter": "^4.0.2",
@@ -23,7 +23,7 @@
    "mdx-bundler": "^8.0.0",
    "next": "12.0.7",
    "next-themes": "^0.0.14",
-    "postcss": "^8.3.5",
+    "postcss": "^8.4.5",
    "preact": "^10.6.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
@@ -38,7 +38,7 @@
    "remark-math": "^5.1.1",
    "sharp": "^0.28.3",
    "smoothscroll-polyfill": "^0.4.4",
-    "tailwindcss": "^2.2.2",
+    "tailwindcss": "^3.0.2",
    "unist-util-visit": "^4.0.0"
  },
  "devDependencies": {
@@ -56,9 +56,9 @@
    "inquirer": "^8.1.1",
    "lint-staged": "^11.0.0",
    "next-remote-watch": "^1.0.0",
+    "prettier": "2.2.1",
    "socket.io": "^4.1.3",
-    "socket.io-client": "^4.1.3",
-    "prettier": "2.2.1"
+    "socket.io-client": "^4.1.3"
  },
  "lint-staged": {
    "*.+(js|jsx|ts|tsx)": [
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,8 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 const colors = require('tailwindcss/colors')

 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js', './lib/**/*.js'],
+  content: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js', './lib/**/*.js'],
  darkMode: 'class',
  theme: {
    extend: {
@@ -21,7 +20,7 @@ module.exports = {
      },
      colors: {
        primary: colors.teal,
-        gray: colors.trueGray,
+        gray: colors.neutral,
      },
      typography: (theme) => ({
        DEFAULT: {
@@ -51,6 +50,9 @@ module.exports = {
            'h4,h5,h6': {
              color: theme('colors.gray.900'),
            },
+            pre: {
+              backgroundColor: theme('colors.gray.800'),
+            },
            code: {
              color: theme('colors.pink.500'),
              backgroundColor: theme('colors.gray.100'),
@@ -116,6 +118,9 @@ module.exports = {
            'h4,h5,h6': {
              color: theme('colors.gray.100'),
            },
+            pre: {
+              backgroundColor: theme('colors.gray.800'),
+            },
            code: {
              backgroundColor: theme('colors.gray.800'),
            },
@@ -148,8 +153,5 @@ module.exports = {
      }),
    },
  },
-  variants: {
-    typography: ['dark'],
-  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
 }