Last active
February 14, 2024 01:19
-
-
Save swyxio/28c25962485101ca291ec1947b9d0b3e to your computer and use it in GitHub Desktop.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} | |
} |
faced with the same issue,
thanks for sharing!
This was very helpful, thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks a lot for doing this 👍