WIP

Author: bradlc

.gitignore

@@ -1,3 +1,4 @@
 .next
 node_modules
-package-lock.json
+package-lock.json
+/docs/out

docs/components/MarkdownSample.mdx

@@ -85,9 +85,7 @@ module.exports = {
     extend: {},
   },
   variants: {},
-  plugins: [
-    require('../src/index.js'),
-  ],
+  plugins: [require('../src/index.js')],
 }
 ```
 
@@ -98,37 +96,42 @@ Hopefully that looks good enough to you.
 Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it I have to carry the burden of at least making it work.
 
 1. **Nested lists are rarely a good idea.**
-    + You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
-    + Nested navigation in UIs is a bad idea too, keep things as flat as possible.
-    + Nesting tons of folders in your source code is also not helpful.
+   - You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
+   - Nested navigation in UIs is a bad idea too, keep things as flat as possible.
+   - Nesting tons of folders in your source code is also not helpful.
 2. **Since we need to have more items, here's another one.**
-    + I'm not sure if I'll bother styling more than two levels deep.
-    + Two is already too much, three is guaranteed to be a bad idea.
-    + If you nest four levels deep you belong in prison.
+   - I'm not sure if I'll bother styling more than two levels deep.
+   - Two is already too much, three is guaranteed to be a bad idea.
+   - If you nest four levels deep you belong in prison.
 3. **Two items isn't really a list, three is good though.**
-    + Again please don't nest lists if you want people to actually read your content.
-    + Nobody wants to look at this.
-    + I'm upset that I even have to bother styling this.
+   - Again please don't nest lists if you want people to actually read your content.
+   - Nobody wants to look at this.
+   - I'm upset that I even have to bother styling this.
 
 The most annoying thing about lists in Markdown is that `<li>` elements aren't given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.
 
 - **For example, here's another nested list.**
 
   But this time with a second paragraph.
-    - These list items won't have `<p>` tags
-    - Because they are only one line each
+
+  - These list items won't have `<p>` tags
+  - Because they are only one line each
+
 - **But in this second top-level list item, they will.**
 
   This is especially annoying because of the spacing on this paragraph.
-    - As you can see here, because I've added a second line, this list item now has a `<p>` tag.
 
-      This is the second line I'm talking about by the way.
-    - Finally here's another list item so it's more like a list.
+  - As you can see here, because I've added a second line, this list item now has a `<p>` tag.
+
+    This is the second line I'm talking about by the way.
+
+  - Finally here's another list item so it's more like a list.
+
 - A closing list item, but with no nested list, because why not?
 
 And finally a sentence to close off this section.
 
-## There are other elements we need to style
+## There are other `elements` we need to style
 
 I almost forgot to style links, like [this link to the Tailwind CSS website](https://tailwindcss.com). How should those look by default, blue I guess? I dunno.
 

docs/pages/index.js

@@ -1,10 +1,28 @@
+import { useState } from 'react'
 import Layout from '../components/Layout'
 import MarkdownSample from '../components/MarkdownSample.mdx'
 
-export default () => (
-  <Layout meta={{ title: 'Tailwind CSS Typography' }}>
-    <div className="prose mx-auto">
-      <MarkdownSample />
-    </div>
-  </Layout>
-)
+export default () => {
+  const [size, setSize] = useState('default')
+
+  return (
+    <Layout meta={{ title: 'Tailwind CSS Typography' }}>
+      <div className="fixed top-0 left-0 flex flex-col ml-3">
+        {['default', 'sm', 'lg', 'xl'].map((s) => (
+          <button
+            type="button"
+            className={`border mt-3 px-4 focus:outline-none ${
+              size === s ? 'border-black' : ''
+            }`}
+            onClick={() => setSize(s)}
+          >
+            {s}
+          </button>
+        ))}
+      </div>
+      <div className={`prose prose-${size} mx-auto`}>
+        <MarkdownSample />
+      </div>
+    </Layout>
+  )
+}

docs/tailwind.config.js

@@ -1,9 +1,12 @@
 module.exports = {
   theme: {
-    extend: {},
+    typography: {
+      default: {
+        // bulletColor: 'red',
+        css: {},
+      },
+    },
   },
   variants: {},
-  plugins: [
-    require('../src/index.js'),
-  ],
+  plugins: [require('../src/index.js')],
 }