docs: finish for now and clean up readme

www/src/components/Layout.tsx

@@ -1,7 +1,7 @@
 import { MDXProvider } from '@mdx-js/react';
 import styled, { css } from 'astroturf/react';
-import React, { useState } from 'react';
 import { Link } from 'gatsby';
+import React, { useState } from 'react';
 
 import CodeBlock from './CodeBlock';
 
@@ -56,7 +56,7 @@ function Layout(props: Props) {
       }}
     >
       <div
-        className="py-3 px-6 sticky top-0 bg-secondary shadow-sm border-b border-secondary-darker flex  justify-between"
+        className="py-3 px-6 sticky top-0 bg-secondary shadow-sm border-b border-secondary-darker flex justify-between"
         css={css`
           @apply py-3 px-6 sticky top-0;
 

www/src/pages/index.tsx

@@ -11,9 +11,8 @@ function HomePage() {
         <img
           src={logo}
           alt="astroturf: Better styling through compiling"
+          className="mx-auto mt-16"
           css={css`
-            composes: mx-auto, mt-16 from global;
-
             max-width: 32rem;
             width: 100%;
             object-fit: contain;

www/tailwind.config.js

@@ -1,4 +1,24 @@
 module.exports = {
+  purge: {
+    content: ['./src/**/*.{js,tsx,mdx}'],
+    options: {
+      defaultExtractor: (content) => {
+        // Capture as liberally as possible, including things like `h-(screen-1.5)`
+        const broadMatches = content.match(/[^<>"'`\s]*[^,<>"'`\s:]/g) || [];
+        const broadMatchesWithoutTrailingSlash = broadMatches.map((match) =>
+          match.replace(/\\\\$/, ''),
+        );
+
+        // Capture classes within other delimiters like .block(class="w-1/2") in Pug
+        const innerMatches =
+          content.match(/[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g) || [];
+
+        return broadMatches
+          .concat(broadMatchesWithoutTrailingSlash)
+          .concat(innerMatches);
+      },
+    },
+  },
   theme: {
     fontFamily: {
       brand: 'Fontdiner Swanky',