Prototyping first design

package.json

@@ -1,8 +1,8 @@
 {
   "scripts": {
-    "serve": "cross-env NODE_ENV=development concurrently \"postcss public/tailwind.css -o public/build/tailwind.css --watch\"  \"live-server ./public\"",
+    "serve": "cross-env NODE_ENV=development concurrently \"postcss public/theme.scss -o public/build/theme.css --watch\"  \"live-server ./public\"",
-    "development": "cross-env NODE_ENV=development postcss public/tailwind.css -o public/build/tailwind.css",
+    "development": "cross-env NODE_ENV=development postcss public/theme.scss -o public/build/theme.css",
-    "production": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/build/tailwind.css"
+    "production": "cross-env NODE_ENV=production postcss public/theme.scss -o public/build/theme.css"
   },
   "dependencies": {
     "autoprefixer": "^9.5.1",

public/tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

public/theme.scss

@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    @apply text-gray-800;
+}
+
+h1, h2, h3, h4, h5, h6, strong {
+    @apply text-gray-900;
+}
+
+article > p, ul, ol {
+    @apply text-lg tracking-wide;
+}
+
+article > p, ul, ol, pre:not(:last-child) {
+    @apply mb-6;
+}
+
+article > ol, ul {
+    @apply list-disc ml-8;
+}
+
+article > li:not(:last-of-type) {
+    @apply mb-2;
+}
+
+article p > code {
+    @apply p-1/2 bg-gray-400;
+}
+
+article > h2 {
+    @apply text-2xl my-8 font-bold text-black;
+}
+
+a {
+    @apply border-b border-black text-black;
+}

tailwind.config.js

@@ -1,6 +1,17 @@
 module.exports = {
   theme: {
-    extend: {},
+    extend: {
+      flex: {
+        'l-24': '0 0 6rem'
+      },
+      fontFamily: {
+        serif: ['Arvo'],
+        mono: ['Source Code Pro']
+      },
+      padding: {
+        '1/2': '0.125rem'
+      }
+    }
   },
   variants: {},
   plugins: [],