Skip to content

Instantly share code, notes, and snippets.

View sebastiano-guerriero's full-sized avatar

Sebastiano Guerriero sebastiano-guerriero

View GitHub Profile
@sebastiano-guerriero
sebastiano-guerriero / article.tsx
Created June 20, 2025 19:29
Text Formatting using Tailwind
export const Prose = ({ children }: { children: React.ReactNode }) => {
return (
<div className="text-base leading-[1.6] *:mb-4 *:last:mb-0 lg:*:mb-6 **:[h1]:text-3xl lg:**:[h1]:text-4xl **:[h2]:text-2xl **:[h1,h2,h3,h4]:font-[700] **:[h1,h2,h3,h4]:text-pretty **:[h1,h2,h3,h4]:tracking-tight **:[h1,h2,h3,h4]:text-contrast-high **:[h1,h2,h3,h4]:mt-8 lg:**:[h1,h2,h3,h4]:mt-10 **:[ul,ol]:pl-[1em] **:[ol]:list-[decimal] **:[li]:marker:text-contrast-medium/25 **:[img]:rounded-md **:[img]:shadow-md **:[img]:ring-1 **:[img]:ring-black/2.5 **:[figcaption]:text-contrast-low **:[figcaption]:mt-3 **:[figcaption]:text-sm **:[figcaption]:leading-[1.4] **:[figcaption]:text-center **:[figcaption]:text-pretty **:[figure]:mb-5 lg:**:[figure]:mb-8 **:[a]:text-primary **:[a]:hover:underline" data-prose>
{children}
</div>
)
}
.grid {
--grid-gap: 0px;
display: flex;
flex-wrap: wrap;
}
.grid > * {
flex-basis: 100%;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.grid > * {
flex-basis: 100%;
}
.grid-gap-xxxs {
.component {
padding: var(--space-md);
}
:root {
// type scale
--text-scale-ratio: 1.2;
--text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio));
--text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
--text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-lg: calc(var(--text-md) * var(--text-scale-ratio));
--text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
--text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
--text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
:root {
--space-unit: 1em;
--space-xxxxs: calc(0.125 * var(--space-unit));
--space-xxxs: calc(0.25 * var(--space-unit));
--space-xxs: calc(0.375 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
.sr-only { // content made available only to screen readers
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
padding: 0;
border: 0;
white-space: nowrap;
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
.compontentTwo--text-center {
text-align: center;
}
.compontentTwo--text-right {
text-align: right;
}
.compontentOne--text-center {
text-align: center;
}
.compontentOne--text-right {
text-align: right;
}