Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Responsive Typography</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="antialiased"> <div class="bg-white dark:bg-slate-900 min-h-screen p-8 lg:p-16 flex items-center justify-center"> <div class="max-w-4xl mx-auto w-full"> <!-- Text scales automatically with viewport size --> <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-slate-900 dark:text-white tracking-tighter leading-[1.1] mb-8"> Responsive<br> <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-cyan-400">Typography Scale</span> </h1> <p class="text-lg sm:text-xl md:text-2xl text-slate-600 dark:text-slate-400 font-light max-w-2xl leading-relaxed mb-12"> This paragraph dynamically adjusts its size based on the viewport breakpoints. It starts at text-lg, scales to text-xl on small screens, and settles at text-2xl on medium and above. </p> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 pt-8 border-t border-slate-100 dark:border-slate-800"> <div> <h3 class="text-base sm:text-lg font-bold text-slate-800 dark:text-slate-200 mb-2">Fluid Hierarchy</h3> <p class="text-sm sm:text-base text-slate-500 dark:text-slate-400 leading-normal">Using standard Tailwind breakpoints to adjust typography ensures optimal reading experience on all devices.</p> </div> <div> <h3 class="text-base sm:text-lg font-bold text-slate-800 dark:text-slate-200 mb-2">Line Heights</h3> <p class="text-sm sm:text-base text-slate-500 dark:text-slate-400 leading-normal">Tailwind pairs sensible line-heights with font sizes automatically, but they can be manually overridden with leading- utilities.</p> </div> <div> <h3 class="text-base sm:text-lg font-bold text-slate-800 dark:text-slate-200 mb-2">Tracking</h3> <p class="text-sm sm:text-base text-slate-500 dark:text-slate-400 leading-normal">Adjusting letter-spacing dynamically (tracking-tighter) gives large display text a much more polished and unified appearance.</p> </div> </div> </div> </div> </body> </html>
