ecklf / tailwindcss-figma-kit

Figma Kit for Tailwind CSS

Home Page:https://www.figma.com/c/file/768809027799962739

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

set tailwind's default line-height

pA1nD opened this issue · comments

Problem

line height of styles is not the same as tailwind.

Expected

Styles use same line-height as tailwind: 150%

Details

Tailwind sets 1.5 as the default line height in the base.css overwrite.

 * Tailwind custom reset styles
 */

/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
  line-height: 1.5; /* 2 */
}

The tailwindcss-figma-kit currently uses Auto which represents 100% of the font defined line-height:

Text boxes also start with automatic line height. When you switch between the fonts, we will adjust the line height to match the font’s default line height. That will make it easier to explore different fonts and have the text feel great either way. We won’t do this, of course, if you specify line height in pixels or as percents.

(source)

Will fix this soon, just need to retouch some of the components since this change is breaking them :P

fixed 👌