Fix(Heading1)!: 🐛 Incorrect Text Size on Production Compared to Localhost ❗

[krsiakdaniel]

Describe the bug

Latest <Heading1 /> text is correct on localhost but wrong and small on production.

Steps to reproduce bug

1. Go to localhost and production.
2. Compare headings sizes.
3. See error.

Expected behavior

Font sizes should be the same.

Desktop

• OS: Mac OS
• Browser: EDGE
• Version: Version 131.0.2903.86 (Official build) (arm64)

Screenshots

[krsiakdaniel]

INFO

• ❗ Had to rollback latest deploy to previous functional version.
• ❗ Need to debug this and fix it before future deployments.

RELATED PR

• refactor(h1): 👷create new - heading1 component #162

[krsiakdaniel]

DEBUGGING

✅ Function parameters work correctly and arguments values are passed:

---

✅ The same applies to other CSS, example text-violet-600.

---

✅ These fonts sizes are working text-sm, text-md, text-lg, text-xl, text-2xl, text-3xl, text-4xl and included in production.

POSSIBLE BUG REASON

❌ It seems like the larger text sizes are not being included in production build:

• text-violet-600 text-5xl sm:text-6xl lg:text-7xl

The same applies for:

• text-8xl, text-9xl

[krsiakdaniel]

ℹ️ Possible solution, need to test it in new build in deploy preview.

Safelisting Classes: If you have classes that are conditionally used or dynamically generated, you can safelist them to ensure they are not purged. This is done using the safelist option in Tailwind configuration.

Info: If you need to make sure Tailwind generates certain class names that don’t exist in content files, use safelist option.

Docs: https://tailwindcss.com/docs/content-configuration#safelisting-classes

[krsiakdaniel]

When fixed, resolve conversations in PR: #162

[krsiakdaniel]

PR

• safelist = fix(tailwind): 🐛 safelist - font sizes #172

Testing

Font sizes tested in new deploy preview. All pages have correct <Heading1 /> sizes.

before:

• https://deploy-preview-162--portfolio-website-krsiak-cz.netlify.app/about-me

after:

• https://deploy-preview-172--portfolio-website-krsiak-cz.netlify.app/about-me

Sreenshots