Manual Tailwind "prose" stylings

Here is the css I put together to replicate Tailwind's basic prose stylings.

Note: I used ".prose-wrapper" before the generic selectors as I am assuming the content you want to apply the prose stylings to are in a wrapper. But you can remove or amend as required.

.prose-wrapper h1{
	color: #111827;
	font-size: 2.25em;
	font-weight: 800;
	line-height: 1.1111111;
	margin-top: 0;
	margin-bottom: 0.8888889em;
}

.prose-wrapper h2{
	color: #111827;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.3333333;
	margin-bottom: 1em;
	margin-top: 2em;	
}

.prose-wrapper h3{
	color: #111827;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 0.6em;	
}

.prose-wrapper h4{
	color: #111827;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 0.5em;
}

.prose-wrapper h5{
	color: #374151;
	font-size: 18px;
	line-height: 1.75;
	margin-top: 0;
}

.prose-wrapper h6{
	color: #374151;
	font-size: 16px;
	line-height: 1.75;
	margin-top: 0;
}

.prose-wrapper p{
	color: #374151;
	line-height: 1.75;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
}

.prose-wrapper a{
	color: #111827;
	font-weight: 500;
	line-height: 1.75;
	text-decoration: underline;
 	text-decoration-line: underline;
 	text-decoration-style: solid;
 	text-decoration-color: currentcolor;
	text-decoration-thickness: auto;
}

.prose-wrapper a:hover{
	text-decoration: none;
}

.prose-wrapper pre{
	background-color: #1f2937;
	border-radius: 0.375rem;
	color: #e5e7eb;
	font-size: 0.875em;
	font-weight: 400;
	line-height: 1.7142857;
	margin-bottom: 1.7142857em;
	margin-top: 1.7142857em;
	overflow-x: auto;
	padding: 0.8571429em 1.1428571em;
}

.prose-wrapper img{
	margin-bottom: 2em;
	margin-top: 2em;
}

/* I created my own button stylings - I don't think there are prose button stylings */

.prose-wrapper button{
	background-color: rgb(37 99 235);
	color: #fff;
	font-size: 0.875em;
	font-weight: 500;
	border-radius: 0.25rem;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	padding: 0.625rem 1.5rem;
	margin-bottom: 1.7142857em;
	margin-top: 1.7142857em;
}

.prose-wrapper button:hover{
	background-color: rgb(29 78 216);
}

Want to be notified of new posts like this?

Sign up to be notified of new posts using the form below. Email addresses are used for the sole purpose of sending once-in-a-while email notifications and nothing else. I promise I don't spam!