Publish Tailwind CSS Typography announcement

Author: adamwathan

package.json

@@ -12,6 +12,7 @@
     "@mapbox/rehype-prism": "^0.5.0",
     "@mdx-js/loader": "^1.6.6",
     "@next/mdx": "^9.4.4",
+    "@tailwindcss/typography": "^0.1.1",
     "@tailwindcss/ui": "^0.3.0",
     "autoprefixer": "^9.8.4",
     "next": "9.4.4",

src/pages/tailwindcss-typography/card.jpg

@@ -0,0 +1,57 @@
+import { adamwathan } from '@/authors'
+import image from './card.jpg'
+
+export const meta = {
+  title: 'Introducing Tailwind CSS Typography',
+  description: `One of the things we believe as a team is that everything we make should be sealed with a blog post. Forcing ourselves to write up a short announcement post for every project we work on acts as a built-in quality check, making sure that we never call a project "done" until we feel comfortable telling the world it's out there. The problem was that up until today, we didn't actually have anywhere to publish those posts!`,
+  date: '2020-07-13T16:35:02.037Z',
+  authors: [adamwathan],
+  image,
+  // discussion: 'https://github.com/tailwindcss/tailwindcss/discussions/1987',
+}
+
+<!--excerpt-->
+
+Until now, trying to style an article, document, or blog post with Tailwind has been a tedious
+task that required a keen eye for typography and a lot of complex custom CSS.
+
+That's why today we're excited to release [`@tailwindcss/typography`](https://github.com/tailwindcss/typography) — a plugin that lets you easily style vanilla HTML content with beautiful typographic defaults.
+
+<!--/excerpt-->
+
+<p className="lead">
+  Until now, trying to style an article, document, or blog post with Tailwind has been a tedious
+  task that required a keen eye for typography and a lot of complex custom CSS.
+</p>
+
+By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
+
+We get lots of complaints about it actually, with people regularly asking us things like:
+
+> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
+
+We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
+
+That's why today we're excited to release [`@tailwindcss/typography`](https://github.com/tailwindcss/typography) — a plugin that gives you what you _actually_ want, without any of the downside of doing something stupid like disabling our base styles.
+
+It adds a new set of `prose` classes that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
+
+```html
+<article class="prose lg:prose-xl">
+  <h1>Garlic bread with cheese: What the science tells us</h1>
+  <p>
+    For years parents have espoused the health benefits of eating garlic bread with cheese to their
+    children, with the food earning such an iconic status in our culture that kids will often dress
+    up as warm, cheesy loaf for Halloween.
+  </p>
+  <p>
+    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
+    springing up around the country.
+  </p>
+  <!-- ... -->
+</article>
+```
+
+So how does it actually look? Well you're looking at it right now — we use it to style the content on this very blog!
+
+[**Check out the documentation**](https://github.com/tailwindcss/typography) to learn more and try it out today.

src/pages/tailwindcss-typography/index.mdx

@@ -46,20 +46,49 @@ module.exports = {
           white: '#fff',
         },
       },
-      typography: {
-        bullets: 'line',
-        linkColor: [
-          '#bada55',
-          {
-            hover: '#facade',
+      typography: (theme) => ({
+        default: {
+          css: {
+            color: theme('colors.gray.700'),
+            h2: {
+              fontWeight: '700',
+              letterSpacing: theme('letterSpacing.tight'),
+              color: theme('colors.gray.900'),
+            },
+            h3: {
+              fontWeight: '600',
+              color: theme('colors.gray.900'),
+            },
+            'ol li:before': {
+              fontWeight: '600',
+              color: theme('colors.gray.500'),
+            },
+            'ul li:before': {
+              backgroundColor: theme('colors.gray.400'),
+            },
+            code: {
+              color: theme('colors.gray.900'),
+            },
+            a: {
+              color: theme('colors.gray.900'),
+            },
+            pre: {
+              color: theme('colors.gray.200'),
+              backgroundColor: theme('colors.gray.800'),
+            },
+            blockquote: {
+              color: theme('colors.gray.900'),
+              borderLeftColor: theme('colors.gray.200'),
+            },
           },
-        ],
-      },
+        },
+      }),
     },
   },
   variants: {},
   plugins: [
     require('@tailwindcss/ui'),
+    require('@tailwindcss/typography'),
     function ({ addBase, addComponents, theme }) {
       addBase([
         {
@@ -83,136 +112,6 @@ module.exports = {
           },
         },
       ])
-
-      addComponents({
-        '.prose': {
-          '> :first-child': {
-            marginTop: '0',
-          },
-          '> :last-child': {
-            marginBottom: '0',
-          },
-
-          fontSize: theme('fontSize.base'),
-          lineHeight: theme('lineHeight.7'),
-          color: theme('colors.gray.700'),
-          p: {
-            marginTop: theme('spacing.5'),
-            marginBottom: theme('spacing.5'),
-          },
-          h2: {
-            marginTop: theme('spacing.12'),
-            marginBottom: theme('spacing.6'),
-            fontSize: theme('fontSize.2xl'),
-            fontWeight: '700',
-            lineHeight: theme('lineHeight.8'),
-            letterSpacing: theme('letterSpacing.tight'), // Consider removing
-            color: theme('colors.gray.900'),
-          },
-          h3: {
-            marginTop: theme('spacing.8'),
-            marginBottom: theme('spacing.3'),
-            fontSize: theme('fontSize.xl'),
-            fontWeight: '600',
-            lineHeight: theme('lineHeight.8'),
-            color: theme('colors.gray.900'),
-          },
-          'h3 + *': {
-            marginTop: '0',
-          },
-          ol: {
-            counterReset: 'list-counter',
-            marginTop: theme('spacing.5'),
-            marginBottom: theme('spacing.5'),
-          },
-          ul: {
-            marginTop: theme('spacing.5'),
-            marginBottom: theme('spacing.5'),
-          },
-          li: {
-            marginTop: theme('spacing.2'),
-            marginBottom: theme('spacing.2'),
-          },
-          'ol li': {
-            position: 'relative',
-            counterIncrement: 'list-counter',
-            paddingLeft: theme('spacing.8'),
-          },
-          'ol li:before': {
-            content: 'counter(list-counter) "."',
-            position: 'absolute',
-            left: '0',
-            fontWeight: '600',
-            color: theme('colors.gray.500'),
-          },
-          'ul li': {
-            position: 'relative',
-            paddingLeft: theme('spacing.8'),
-          },
-          'ul li:before': {
-            content: '""',
-            position: 'absolute',
-            top: 'calc(0.875em - 0.0625em)',
-            left: '0',
-            backgroundColor: theme('colors.gray.400'),
-            height: '0.125em',
-            width: '0.75em',
-          },
-          img: {
-            marginTop: theme('spacing.8'),
-            marginBottom: theme('spacing.8'),
-          },
-          video: {
-            marginTop: theme('spacing.8'),
-            marginBottom: theme('spacing.8'),
-          },
-          figure: {
-            marginTop: theme('spacing.8'),
-            marginBottom: theme('spacing.8'),
-          },
-          code: {
-            fontSize: theme('fontSize.sm'),
-            lineHeight: theme('lineHeight.7'),
-            fontFamily: theme('fontFamily.mono').join(', '),
-            color: theme('colors.gray.700'),
-            backgroundColor: theme('colors.gray.50'),
-            borderColor: theme('colors.gray.200'),
-            borderWidth: theme('borderWidth.default'),
-            borderRadius: theme('borderRadius.md'),
-            paddingTop: theme('spacing.1'),
-            paddingRight: theme('spacing[1.5]'),
-            paddingBottom: theme('spacing.1'),
-            paddingLeft: theme('spacing[1.5]'),
-          },
-          a: {
-            color: theme('colors.gray.900'),
-            textDecoration: 'underline',
-          },
-          pre: {
-            color: theme('colors.gray.200'),
-            fontSize: theme('fontSize.sm'),
-            fontFamily: theme('fontFamily.mono').join(', '),
-            lineHeight: theme('lineHeight.6'),
-            borderRadius: theme('borderRadius.md'),
-            backgroundColor: theme('colors.gray.800'),
-            paddingTop: theme('spacing.3'),
-            paddingRight: theme('spacing.4'),
-            paddingBottom: theme('spacing.3'),
-            paddingLeft: theme('spacing.4'),
-            overflowX: 'auto',
-          },
-          'pre code': {
-            backgroundColor: 'transparent',
-            borderWidth: '0',
-            borderRadius: '0',
-            padding: '0',
-            color: 'inherit',
-            fontSize: 'inherit',
-            fontFamily: 'inherit',
-            lineHeight: 'inherit',
-          },
-        },
-      })
     },
   ],
 }

tailwind.config.js

@@ -1137,6 +1137,11 @@
     mini-svg-data-uri "^1.0.3"
     traverse "^0.6.6"
 
+"@tailwindcss/typography@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.1.1.tgz#b38c79765e17bfa2390304cbc3ce71120a0b8326"
+  integrity sha512-CIxGZtU13VK/+EUE6wsb3d7xze0FAX6HiN8r1r3xWQQ3Hawbw1ahCPUBG9mBZW4OlJeZfEz3101yhXr0cllX0Q==
+
 "@tailwindcss/ui@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@tailwindcss/ui/-/ui-0.3.0.tgz#846e489c61bdeb60bdd4e2c32033db770ad8d429"
@@ -4203,6 +4208,18 @@ mime-db@1.44.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
   integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
 
+mime-db@~1.25.0:
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.25.0.tgz#c18dbd7c73a5dbf6f44a024dc0d165a1e7b1c392"
+  integrity sha1-wY29fHOl2/b0SgJNwNFloeexw5I=
+
+mime-types@2.1.13:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.13.tgz#e07aaa9c6c6b9a7ca3012c69003ad25a39e92a88"
+  integrity sha1-4HqqnGxrmnyjASxpADrSWjnpKog=
+  dependencies:
+    mime-db "~1.25.0"
+
 mime-types@~2.1.24:
   version "2.1.27"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
@@ -5715,6 +5732,14 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rss@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rss/-/rss-1.2.2.tgz#50a1698876138133a74f9a05d2bdc8db8d27a921"
+  integrity sha1-UKFpiHYTgTOnT5oF0r3I240nqSE=
+  dependencies:
+    mime-types "2.1.13"
+    xml "1.0.1"
+
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
@@ -6865,6 +6890,11 @@ ws@^6.0.0:
   dependencies:
     async-limiter "~1.0.0"
 
+xml@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"
+  integrity sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"