Add tailwind typography for richtext

majak_uistyleguide/templates/patterns/atoms/text/richtext.html

-<div class="content-block">
+<div class="content-block prose max-w-none">
   <h2> {{ richtext_h2 }}</h2>
   <h3> {{ richtext_h3 }} </h3>
   <h4> {{ richtext_h4 }}</h4>
   <p>  {{ richtext_p }}</p>
+  <p>  {{ richtext_p }}</p>
+  <ul>
+    <li>{{ richtext_li }}</li>
+    <li>{{ richtext_li }}</li>
+    <li>{{ richtext_li }}</li>
+  </ul>
+  <ol>
+    <li>{{ richtext_li }}</li>
+    <li>{{ richtext_li }}</li>
+    <li>{{ richtext_li }}</li>
+  </ol>
 </div>

majak_uistyleguide/templates/patterns/atoms/text/richtext.yaml

@@ -5,3 +5,4 @@ context:
   richtext_p: 'p - Curabitizzle fo shizzle diam quizzle Curabitizzle fo shizzle diam quizzle
   Curabitizzle fo shizzle diam quizzle Curabitizzle fo shizzle diam quizzle Curabitizzle fo shizzle diam quizzle
   Curabitizzle fo shizzle diam quizzle Curabitizzle fo shizzle diam quizzle Curabitizzle fo shizzle diam quizzle'
+  richtext_li: 'Curabitizzle fo shizzle diam quizzle'

majak_uistyleguide/templates/patterns/molecules/articles/article_richtext_content.html

 <div class="grid-container mb-2 lg:mb-12">
-  <div class="grid-content">
+  <div class="grid-content prose max-w-none">
     <h2 class="text-3xl leading-7 head-4xl">
       {{ richtext_title }}
     </h2>

package-lock.json

@@ -11,6 +11,7 @@
         "vue-slick-carousel": "^1.0.6"
       },
       "devDependencies": {
+        "@tailwindcss/typography": "^0.5.8",
         "autoprefixer": "^10.4.8",
         "color": "^3.1.2",
         "lodash": "^4.17.15",
@@ -116,6 +117,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
+      "integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/@vitejs/plugin-vue2": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue2/-/plugin-vue2-2.0.0.tgz",
@@ -985,6 +1001,12 @@
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
       "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw=="
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -995,6 +1017,18 @@
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
     },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "node_modules/lodash.pick": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
@@ -1730,6 +1764,18 @@
         "fastq": "^1.6.0"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
+      "integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
+      "dev": true,
+      "requires": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      }
+    },
     "@vitejs/plugin-vue2": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue2/-/plugin-vue2-2.0.0.tgz",
@@ -2264,6 +2310,12 @@
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
       "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw=="
     },
+    "lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -2274,6 +2326,18 @@
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "lodash.pick": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",

package.json

@@ -11,9 +11,10 @@
     "vue-slick-carousel": "^1.0.6"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.8",
+    "autoprefixer": "^10.4.8",
     "color": "^3.1.2",
     "lodash": "^4.17.15",
-    "autoprefixer": "^10.4.8",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.2.1",
     "postcss-nesting": "^10.2.0",

src/css/atoms/heading.pcss

@@ -195,7 +195,7 @@ p {
     @apply font-alt text-3xl font-medium leading-7 tracking-tight uppercase mb-5 lg:leading-10 xl:text-4xl;
   }
   h3 {
-    @apply font-alt leading-4 text-lg tracking-tight uppercase xl:text-3xl xl:leading-8;
+    @apply font-alt font-medium leading-4 text-lg tracking-tight uppercase xl:text-3xl xl:leading-8;
   }
   h4 {
     @apply font-alt xl:text-2xl font-medium leading-8 uppercase;

tailwind.config.js

@@ -158,6 +158,7 @@ module.exports = {
         },
     },
     plugins: [
+        require('@tailwindcss/typography'),
         require("./tailwind-plugins/buttons")({
             defaultColor: {
                 text: 'white',