Override Tailwind default

Tailwind Line Height Debugging

For the default usage of Tailwind, usually you will use the base Tailwind CSS Directives

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base, adds some preflight "best practices" styles to your CSS output.

However, the issue with these preflight styles is that the default line-height and font-family styles result in you being unable to override the line-height with values lower than 1.5 (Last tested on Chrome 12/7/2022)

To overcome this, you need to override some of these default preflight styles by replacing your default css file for loading tailwindcss with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;
​
html {
 line-height: unset;
 font-family: unset;
}