Tailwind CDN to Postcss w/ purge

.eleventy.js

@@ -5,15 +5,15 @@ const markdownIt = require('markdown-it');
 const markdownItClass = require('@toycode/markdown-it-class');
 
 const markdownClassMapping = {
-  h1: ['text-4xl'],
+  h1: ['hide'],
   h2: ['text-3xl'],
   h3: ['text-2xl'],
   h4: ['text-xl'],
   h5: ['text-lg'],
   h6: ['font-bold'],
   a: ['text-blue-300', 'hover:underline'],
-  p: ['mb-2'],
-  img: ['max-w-lg'],
+  p: ['mb-2', 'text-gray-500'],
+  img: ['max-w-lg', 'rounded-lg', 'my-8'],
 };
 
 module.exports = function(eleventyConfig) {

_includes/base-footer.html

@@ -1,4 +1,4 @@
-    <footer class="mt-12 max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
+    <footer class="mb-2 mt-12 max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
       <div class="text-gray-500">
         Built in <a href="https://www.11ty.dev/">Eleventy</a> with <a href="https://tailwindui.com/">Tailwind UI</a>
       </div>

_includes/base-header.html

@@ -4,7 +4,7 @@
   <title>Wroten - {{title}}</title>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+  <link href="/styles.css" rel="stylesheet">
   <link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
 </head>
 

package.json

@@ -4,8 +4,10 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "npx @11ty/eleventy",
-    "serve": "npx @11ty/eleventy --serve",
+    "serve:styles": "npx postcss styles.css -o _site/styles.css --watch",
+    "serve:site": "npx @11ty/eleventy --serve",
+    "build:site": "npx @11ty/eleventy",
+    "build:styles": "npx postcss styles.css -o _site/styles.css --env production",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -21,7 +23,11 @@
   "devDependencies": {
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.6",
-    "nunjucks-date": "^1.5.0"
+    "autoprefixer": "^10.2.4",
+    "nunjucks-date": "^1.5.0",
+    "postcss": "^8.2.4",
+    "postcss-cli": "^8.3.1",
+    "tailwindcss": "^2.0.2"
   },
   "dependencies": {
     "@toycode/markdown-it-class": "^1.2.4"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

styles.css

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

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./_site/**/*.html'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}