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);
}

Let's talk.

Google reCaptcha: Invalid site key.