Style Guide
What you will need for your project. Based on TailwindCSS typography sizes. Add your text to preview. To preview the type scale, visit this page Type scale. See Notes for more details and tips for this pair.
Content width (672px)
/* CSS classes */ .text_9xl { font-size: 8rem; /* 128px */line-height: 1; /* 128px */ } /* TailwindCSS classes */ text-9xl /* CSS classes */ .text_8xl { font-size: 6rem; /* 96px */line-height: 1; /* 96px */ } /* TailwindCSS classes */ text-8xl /* CSS classes */ .text_7xl { font-size: 4.5rem; /* 72px */line-height: 1; /* 72px */ } /* TailwindCSS classes */ text-7xl /* CSS classes */ .text_6xl { font-size: 3.75rem; /* 60px */line-height: 1; /* 60px */ } /* TailwindCSS classes */ text-6xl /* CSS classes */ .text_5xl { font-size: 3rem; /* 48px */line-height: 1; /* 48px */ } /* TailwindCSS classes */ text-5xl /* CSS classes */ .text_4xl { font-size: 2.25rem; /* 36px */line-height: 2.5rem; /* 40px */ } /* TailwindCSS classes */ text-4xl /* CSS classes */ .text_4xl { font-size: 2.25rem; /* 36px */line-height: 2.5rem; /* 40px */ } /* TailwindCSS classes */ text-4xlfont-bold /* CSS classes */ .text_3xl { font-size: 1.875rem; /* 30px */line-height: 2.25rem; /* 36px */ } /* TailwindCSS classes */ text-3xlfont-bold /* CSS classes */ .text_2xl { font-size: 1.5rem; /* 24px */line-height: 2rem; /* 32px */ } /* TailwindCSS classes */ text-2xlfont-bold /* CSS classes */ .text_xl { font-size: 1.25rem; /* 20px */line-height: 1.75rem; /* 28px */ } /* TailwindCSS classes */ text-xl /* CSS classes */ .text_lg { font-size: 1.125rem; /* 18px */line-height: 1.5rem; /* 24px */ } /* TailwindCSS classes */ text-lg /* CSS classes */ .text_base { font-size: 1rem; /* 16px */line-height: 1.5rem; /* 24px */ } /* TailwindCSS classes */ text-base /* CSS classes */ .text_sm { font-size: 0.875rem; /* 14px */line-height: 1.25rem; /* 20px */ } /* TailwindCSS classes */ text-sm /* CSS classes */ .text_xs { font-size: 0.75rem; /* 12px */line-height: 1rem; /* 16px */ } /* TailwindCSS classes */ text-xs