minor adjustment of heading sizes

Author: alexanbj

.changeset/small-fishes-accept.md

@@ -0,0 +1,5 @@
+---
+'@obosbbl/grunnmuren-tailwind': patch
+---
+
+minor adjustment of heading sizes

packages/react/src/__stories__/Typography.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Typography',
+};
+
+export default meta;
+
+export const Icons = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <h1 className="h1">This is a H1 heading</h1>
+      <h2 className="h2">This is a H2 heading</h2>
+      <h3 className="h3">This is a H3 heading</h3>
+      <h4 className="h4">This is a H4 heading</h4>
+    </div>
+  );
+};

packages/tailwind/tailwind-base.cjs

@@ -85,10 +85,11 @@ module.exports = (options = {}) => {
       }),
 
       plugin(function ({ addBase, addComponents }) {
-        const h1 = '@apply font-bold text-3xl md:text-5xl';
-        const h2 = '@apply font-bold text-2xl md:text-4xl';
-        const h3 = '@apply font-bold text-xl md:text-2xl';
-        const h4 = '@apply font-bold text-lg md:text-xl';
+        // This is tailwind syntax for setting both the font-size and the line-height
+        const h1 = '@apply font-bold text-[28px]/[38px] md:text-[40px]/[56px]';
+        const h2 = '@apply font-bold text-[24px]/[30px] md:text-[32px]/[42px]';
+        const h3 = '@apply font-bold text-[20px]/[30px] md:text-[24px]/[34px]';
+        const h4 = '@apply font-bold text-[18px]/[24px] md:text-[20px]/[28px]';
 
         if (options.legacyV1Compatibility) {
           addBase({