ndkTypography
A new modern set of UI components.
Font styles
TailwindCSS comes with a set of reset styles that strips away all default styling for most elements. ndk provides a little typography stylesheet that provides basic styling to "text" elements:
h1,h2,h3,h4,h5,h6,p,caption.
It adds back sensible default font weights, sizes and line heights to these elements. To use this, import it into your globals.css file
and add a _ui classname to an element or area you want this to affect.
Usage
@import "tailwindcss";
/* should come after the "tokens" import */
@import "@_ndk/ui/typography";// the typography styles will only apply to children of an element with class "_ui"
<body className="_ui ..."></body>Installation
Copy-Paste the following code into your project
@layer base {
._ui h1 {
@apply my-5 text-5xl/[1.1] font-[800];
}
._ui h2 {
@apply my-4 text-4xl/[1.2] font-bold;
}
._ui h3 {
@apply my-3 text-3xl/[1.3] font-[600];
}
._ui h4 {
@apply my-2 text-2xl/[1.4] font-medium;
}
._ui h5 {
@apply my-1 text-xl font-medium;
}
._ui h6 {
@apply my-0.5 text-lg font-medium;
}
._ui p {
@apply text-base/6;
}
._ui .caption {
font-size: var(--text-sm);
color: var(--text-secondary);
}
}Typefaces
I have collected a bunch of font files (mostly Google fonts and some free variable fonts I found on the internet), that is intended for local use in your application, no need for a CDN link.
To use (make sure you've installed the @_ndk/ui package before continuing), import the css file in your main css file and apply them using tailwind variables or with their font family names.
@import "tailwindcss";
/* should come after the "tokens" import */
@import "@_ndk/ui/typography";<div className="font-InterV"></div>This is a list of all the font variables and their font-family names.
@theme {
/* --variable: "fontFamilyName" */
--font-Geist: "Geist";
--font-GeistMono: "Geist Mono";
--font-InterV: "InterV";
--font-Axiforma: "Axiforma";
--font-FKGrotesk: "FKGrotesk";
--font-FKGroteskNeue: "FKGrotesk Neue";
--font-Lexend: "Lexend";
--font-PPEditorialItalic: "PPEditorial Italic";
--font-PPEditorialVar: "PPEditorial Var";
--font-ABeeZee: "ABeeZee";
--font-SohneVar: "Sohne Var";
--font-Archivo: "Archivo";
--font-GTWalsheim: "GT Walsheim";
--font-UntitledSansB: "Untitled Sans Bold";
--font-UntitledSansR: "Untitled Sans Regular";
--font-MSaans: "M Saans";
--fontCabinetGrotesk: "Cabinet Grotesk";
--font-CalSans: "Cal Sans";
--font-FunnelDisplay: "Funnel Display";
--font-SeriouslyNostalgic: "Seriously Nostalgic";
--font-JetBrainsMono: "JetBrains Mono";
--font-MartianGrotesk: "Martian Grotesk";
--font-WFSans: "WF Sans";
}