Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tailwind CSS Un-Reset - un-reset Tailwind's Preflight CSS Reset so that autogenerated HTML looks consistent with the rest of your Tailwind site. - https://www.swyx.io/writing/tailwind-unreset
.unreset {
a {
@apply text-blue-700 underline;
}
p {
@apply my-4;
}
blockquote,
figure {
@apply my-4 mx-10;
}
hr {
@apply border;
}
h1 {
@apply text-4xl font-bold my-2;
}
h2 {
@apply text-2xl font-bold my-3;
}
h3 {
@apply text-lg font-bold my-4;
}
h4 {
@apply text-base font-bold my-5;
}
h5 {
@apply text-sm font-bold my-6;
}
h6 {
@apply text-xs font-bold my-10;
}
article,
aside,
nav,
section {
h1 {
@apply text-2xl font-bold my-3;
}
article,
aside,
nav,
section {
h1 {
@apply text-lg font-bold my-4;
}
article,
aside,
nav,
section {
h1 {
@apply text-base font-bold my-5;
}
article,
aside,
nav,
section {
h1 {
@apply text-sm font-bold my-6;
}
article,
aside,
nav,
section {
h1 {
@apply text-xs font-bold my-10;
}
}
}
}
}
}
ul,
menu {
// should be my-4 for proper reset, but thats ugly af
@apply list-disc my-1 pl-10;
}
ol {
@apply list-decimal my-4 pl-10;
}
ul,
ol {
ul {
list-style-type: circle;
}
ul,
ol {
ul {
list-style-type: square;
}
}
}
dd {
@apply pl-10;
}
dl {
@apply my-4;
}
ul,
ol,
menu,
dl {
ul,
ol,
menu,
dl {
margin: 0;
}
}
legend {
@apply py-0 px-1;
}
fieldset {
@apply my-0 mx-1 pt-0 px-1 pb-2;
}
b,
strong {
font-weight: bold;
}
pre {
@apply my-4;
}
}
@sw-yx

This comment has been minimized.

Copy link
Owner Author

@sw-yx sw-yx commented Apr 4, 2020

image

image

@sudorock

This comment has been minimized.

Copy link

@sudorock sudorock commented May 4, 2021

Thanks a lot for doing this 👍

@dospolov

This comment has been minimized.

Copy link

@dospolov dospolov commented Nov 10, 2021

faced with the same issue,
thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment