tailwindlabs · adamwathan · Nov 7, 2021 · Oct 2, 2021 · Oct 4, 2021 · Oct 4, 2021
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -28,7 +28,7 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: nodeModules-${{ hashFiles('**/yarn.lock') }}-${{ matrix.node-version }}
+          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
           restore-keys: |
             nodeModules-
       - name: Install dependencies

diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,4 @@
 .next
 node_modules
-package-lock.json
 /demo/out
-coverage/
+coverage/
diff --git a/demo/components/MarkdownSampleShort.mdx b/demo/components/MarkdownSampleShort.mdx
@@ -0,0 +1,60 @@
+<p className="lead">
+  Until now, trying to style an article, document, or blog post with Tailwind has been a very
+  tedious task.
+</p>
+
+The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
+
+> 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?
+
+<div className="not-prose">
+  <h2>Shouldn't be colored</h2>
+</div>
+
+```html
+<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>
+```
+
+For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
+
+---
+
+## This is a heading
+
+1. We want everything to look good out of the box.
+2. Really just the first reason, that's the whole point of the plugin.
+3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
+
+Now **I'm going to show you** an example of an unordered list to make sure that looks good, too:
+
+- So here is the first item in this list.
+- In this example we're keeping the items short.
+- Later, we'll use longer, more complex list items.
+
+Let's even style a table:
+
+| Wrestler                | Origin       | Finisher           |
+| ----------------------- | ------------ | ------------------ |
+| Bret "The Hitman" Hart  | Calgary, AB  | Sharpshooter       |
+| Stone Cold Steve Austin | Austin, TX   | Stone Cold Stunner |
+| Randy Savage            | Sarasota, FL | Elbow Drop         |
+| Vader                   | Boulder, CO  | Vader Bomb         |
+| Razor Ramon             | Chuluota, FL | Razor's Edge       |
+
+Finally, a figure with a caption:
+
+<figure>
+  <img
+    src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&h=500&q=80"
+    alt=""
+  />
+  <figcaption>
+    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
+    classical Latin literature from 45 BC, making it over 2000 years old.
+  </figcaption>
+</figure>
+
+And that's the end of our little demo.
diff --git a/demo/pages/_app.js b/demo/pages/_app.js
@@ -1,12 +1,6 @@
 import 'tailwindcss/tailwind.css'
 import React from 'react'
-import App from 'next/app'
 
-class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props
-    return <Component {...pageProps} />
-  }
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
 }
-
-export default MyApp
diff --git a/demo/pages/dark.js b/demo/pages/dark.js
@@ -0,0 +1,24 @@
+import Head from 'next/head'
+import MarkdownSampleShort from '../components/MarkdownSampleShort.mdx'
+
+export default function Index() {
+  return (
+    <div className="antialiased text-gray-900">
+      <Head>
+        <title>Tailwind CSS Typography</title>
+      </Head>
+      <div className="grid">
+        <div className="bg-white dark:bg-gray-900">
+          <article className="py-12 px-4 prose prose-gray dark:prose-invert mx-auto">
+            <h1>Are you happy now?</h1>
+            <MarkdownSampleShort />
+          </article>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const config = {
+  unstable_runtimeJS: false,
+}
diff --git a/demo/pages/index.js b/demo/pages/index.js
@@ -45,7 +45,7 @@ export default function Index() {
                 </a>
               </div>
             </div>
-            <div className="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto">
+            <div className="prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl 2xl:prose-2xl mx-auto">
               <MarkdownSample />
             </div>
           </div>

diff --git a/demo/pages/list-items.js b/demo/pages/list-items.js
@@ -0,0 +1,176 @@
+import Head from 'next/head'
+import MarkdownSampleShort from '../components/MarkdownSampleShort.mdx'
+
+export default function Index() {
+  return (
+    <div className="antialiased text-gray-900 py-12 pl-32 space-y-12">
+      <Head>
+        <title>Tailwind CSS Typography</title>
+      </Head>
+      <div className="relative">
+        <div className="absolute inset-0 flex prose prose-sm opacity-0">
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+        </div>
+        <div className="relative prose prose-sm">
+          <h3>prose-sm</h3>
+          <p>It's important to cover all of these use cases for a few reasons:</p>
+          <ol>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+            <li>
+              Here's a third pretend reason though a list with three items looks more realistic than
+              a list with two items.
+            </li>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+          </ol>
+          <p>Now we're going to try out another header style.</p>
+          <ul>
+            <li>So here is the first item in this list.</li>
+            <li>In this example we're keeping the items short.</li>
+            <li>Later, we'll use longer, more complex list items.</li>
+          </ul>
+        </div>
+      </div>
+      <div className="relative">
+        <div className="absolute inset-0 flex prose prose-base opacity-0">
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+        </div>
+        <div className="relative prose prose-base">
+          <h3>prose-base</h3>
+          <p>It's important to cover all of these use cases for a few reasons:</p>
+          <ol>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+            <li>
+              Here's a third pretend reason though a list with three items looks more realistic than
+              a list with two items.
+            </li>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+          </ol>
+          <p>Now we're going to try out another header style.</p>
+          <ul>
+            <li>So here is the first item in this list.</li>
+            <li>In this example we're keeping the items short.</li>
+            <li>Later, we'll use longer, more complex list items.</li>
+          </ul>
+        </div>
+      </div>
+      <div className="relative">
+        <div className="absolute inset-0 flex prose prose-lg opacity-0">
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+        </div>
+        <div className="relative prose prose-lg">
+          <h3>prose-lg</h3>
+          <p>It's important to cover all of these use cases for a few reasons:</p>
+          <ol>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+            <li>
+              Here's a third pretend reason though a list with three items looks more realistic than
+              a list with two items.
+            </li>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+          </ol>
+          <p>Now we're going to try out another header style.</p>
+          <ul>
+            <li>So here is the first item in this list.</li>
+            <li>In this example we're keeping the items short.</li>
+            <li>Later, we'll use longer, more complex list items.</li>
+          </ul>
+        </div>
+      </div>
+      <div className="relative">
+        <div className="absolute inset-0 flex prose prose-xl opacity-0">
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+        </div>
+        <div className="relative prose prose-xl">
+          <h3>prose-xl</h3>
+          <p>It's important to cover all of these use cases for a few reasons:</p>
+          <ol>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+            <li>
+              Here's a third pretend reason though a list with three items looks more realistic than
+              a list with two items.
+            </li>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+          </ol>
+          <p>Now we're going to try out another header style.</p>
+          <ul>
+            <li>So here is the first item in this list.</li>
+            <li>In this example we're keeping the items short.</li>
+            <li>Later, we'll use longer, more complex list items.</li>
+          </ul>
+        </div>
+      </div>
+      <div className="relative">
+        <div className="absolute inset-0 flex prose prose-2xl opacity-0">
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-200" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+          <div className="border-l border-red-100" style={{ width: '1em' }}></div>
+        </div>
+        <div className="relative prose prose-2xl">
+          <h3>prose-2xl</h3>
+          <p>It's important to cover all of these use cases for a few reasons:</p>
+          <ol>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+            <li>
+              Here's a third pretend reason though a list with three items looks more realistic than
+              a list with two items.
+            </li>
+            <li>We want everything to look good out of the box.</li>
+            <li>Really just the first reason, that's the whole point of the plugin.</li>
+          </ol>
+          <p>Now we're going to try out another header style.</p>
+          <ul>
+            <li>So here is the first item in this list.</li>
+            <li>In this example we're keeping the items short.</li>
+            <li>Later, we'll use longer, more complex list items.</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const config = {
+  unstable_runtimeJS: false,
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ export default function Index() { @@
                     </a>
                   </div>
                 </div>
-                <div className="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto">
+                <div className="prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl 2xl:prose-2xl mx-auto">
                   <MarkdownSample />
                 </div>
               </div>
@@ Expand Down @@