Use Tailwind without Tailwind

I like how websites are created with Tailwind. The aspect is very cool and looks modern, but sometimes I only want to apply some CSS rules that I use in Tailwind but I don't want to install it.

I created this note to share some CSS rules than I use in my projects:

Fonts size

text-lg	
font-size: 1.125rem;
line-height: 1.75rem;

text-xl	
font-size: 1.25rem;
line-height: 1.75rem;

text-2xl	
font-size: 1.5rem;
line-height: 2rem;

text-3xl	
font-size: 1.875rem;
line-height: 2.25rem;

text-4xl	
font-size: 2.25rem;
line-height: 2.5rem;

Font weight

font-normal  |	font-weight: 400;
font-medium  |	font-weight: 500;
font-semibold  |	font-weight: 600;
font-bold  |	font-weight: 700;
font-extrabold  | font-weight: 800;

Space

letter-spacing: -.025em;

Padding

p-1	|	padding: 0.25rem;
p-1.5	|	padding: 0.375rem;
p-2	|	padding: 0.5rem;
p-2.5	|	padding: 0.625rem;
p-3	|	padding: 0.75rem;
p-3.5	|	padding: 0.875rem;
p-4	|	padding: 1rem;
p-5	|	padding: 1.25rem;
p-6	|	padding: 1.5rem;
p-7	|	padding: 1.75rem;
p-8	|	padding: 2rem;
p-9	|	padding: 2.25rem;
p-10	|	padding: 2.5rem;

Height

h-4	|	height: 1rem;
h-5	|	height: 1.25rem;
h-6	|	height: 1.5rem;
h-7	|	height: 1.75rem;
h-8	|	height: 2rem;
h-9	|	height: 2.25rem;
h-10	|	height: 2.5rem;

Min height

min-height: 100vh;

Max width

max-w-3xl	max-width: 48rem;
max-w-4xl	max-width: 56rem;
max-w-5xl	max-width: 64rem;
max-w-6xl	max-width: 72rem;
max-w-7xl	max-width: 80rem;