Add and use Tailwind CSS typography plugin

Replace custom markup styles with Tailwind CSS's typography/prose plugin
(https://github.com/tailwindlabs/tailwindcss-typography).

web/themes/custom/opdavies/assets/css/components/markup.pcss

@@ -1,115 +0,0 @@
-.markup {
-  a {
-    @apply underline;
-
-    &:hover {
-      @apply no-underline
-    }
-
-    &:focus {
-      @apply p-px -m-px bg-blue-700 text-white outline-none
-    }
-  }
-
-  p {
-    @apply leading-relaxed;
-
-    + p {
-      @apply mt-4
-    }
-  }
-
-  ol {
-    @apply list-decimal
-  }
-
-  ul {
-    @apply list-disc;
-  }
-
-  ol,
-  ul {
-    @apply pl-5;
-
-    + * {
-      @apply mt-4
-    }
-
-    li + li {
-      @apply mt-2
-    }
-  }
-
-  p {
-    + blockquote,
-    + ol,
-    + ul,
-    + div[v-pre] {
-      @apply mt-4
-    }
-  }
-
-  blockquote + * {
-    @apply mt-4
-  }
-
-  code {
-    @apply -my-px px-1 py-px border border-gray-400 text-sm bg-gray-200
-  }
-
-  pre {
-    @apply border-l-3 border-gray-400 text-sm bg-gray-200;
-
-    code {
-      @apply p-6 block border-none leading-loose text-sm overflow-x-scroll
-    }
-  }
-
-  * + pre,
-  * + div[v-pre] {
-    @apply my-4
-  }
-
-  img,
-  figure {
-    @apply my-8
-  }
-
-  figure {
-    img {
-      @apply m-0
-    }
-
-    figcaption {
-      @apply mt-3
-    }
-  }
-
-  h2 {
-    @apply leading-tight
-  }
-
-  * + h2 {
-    @apply mt-6
-  }
-
-  h2 + * {
-    @apply mt-3
-  }
-
-  h3 {
-    @apply text-xl font-bold leading-tight
-  }
-
-  * + h3 {
-    @apply mt-6
-  }
-
-  h3 + * {
-    @apply mt-2
-  }
-
-  h2 + h3 {
-    @apply mt-4
-  }
-}

web/themes/custom/opdavies/assets/css/custom-components.pcss

@@ -1,7 +1,6 @@
 @import './components/button.pcss';
 @import './components/container.pcss';
 @import './components/lead.pcss';
-@import './components/markup.pcss';
 @import './components/note.pcss';
 @import './components/recommendation.pcss';
 @import './components/table.pcss';

web/themes/custom/opdavies/package-lock.json

@@ -1102,6 +1102,12 @@
         "yargs-parser": "^18.1.3"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.2.0.tgz",
+      "integrity": "sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==",
+      "dev": true
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",

web/themes/custom/opdavies/package.json

@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@symfony/webpack-encore": "^0.30.2",
+    "@tailwindcss/typography": "^0.2.0",
     "alpinejs": "^2.3.5",
     "autoprefixer": "^9.8.0",
     "highlightjs": "^9.16.2",

web/themes/custom/opdavies/tailwind.config.js

@@ -19,6 +19,19 @@ module.exports = {
     }
   },
   theme: {
+    typography: (theme) => ({
+      default: {
+        css: {
+          a: {
+            color: theme('colors.blue.500')
+          },
+          h2: {
+            marginBottom: theme('spacing.2'),
+            marginTop: theme('spacing.8')
+          }
+        }
+      }
+    }),
     extend: {
       colors: {
         inherit: 'inherit'
@@ -51,7 +64,9 @@ module.exports = {
           return `.${e(`focus-visible${separator}${className}`)}[data-focus-visible-added]`
         })
       })
-    })
+    }),
+
+    require('@tailwindcss/typography')
   ],
   variants: {
     borderColor: [...variants.borderColor, 'focus-visible'],

web/themes/custom/opdavies/templates/field/field--body.html.twig

@@ -44,12 +44,12 @@
   {% if multiple %}
     <div{{ attributes }}>
       {% for item in items %}
-        <div{{ item.attributes.addClass('markup') }}>{{ item.content }}</div>
+        <div{{ item.attributes.addClass('prose max-w-none') }}>{{ item.content }}</div>
       {% endfor %}
     </div>
   {% else %}
     {% for item in items %}
-      <div{{ attributes.addClass('markup') }}>{{ item.content }}</div>
+      <div{{ attributes.addClass('prose max-w-none') }}>{{ item.content }}</div>
     {% endfor %}
   {% endif %}
 {% else %}
@@ -59,7 +59,7 @@
     <div>
       {% endif %}
       {% for item in items %}
-        <div{{ item.attributes.addClass('markup') }}>{{ item.content }}</div>
+        <div{{ item.attributes.addClass('prose max-w-none') }}>{{ item.content }}</div>
       {% endfor %}
       {% if multiple %}
     </div>

web/themes/custom/opdavies/templates/field/field--node--field-events--talk.html.twig

@@ -42,7 +42,7 @@
   ]
 %}
 
-<div{{ attributes.addClass('markup') }}>
+<div{{ attributes.addClass('prose max-w-none') }}>
   <h2{{ title_attributes.addClass(title_classes) }}>
     {{ label }}
   </h2>

web/themes/custom/opdavies/templates/node/node--talk.html.twig

@@ -90,7 +90,7 @@
     </footer>
   {% endif %}
 
-  <div{{ content_attributes.addClass(['space-y-6', page ? 'markup']) }}>
+  <div{{ content_attributes.addClass(['space-y-6', page ? 'prose max-w-none']) }}>
     {{ content }}
   </div>