@benface/tailwindcss-reset
v3.1.1
Published
Opinionated CSS reset to apply on top of Tailwind CSS’s Preflight
Downloads
130
Readme
Opinionated Reset Plugin for Tailwind CSS
Requirements
This plugin requires Tailwind CSS 1.2 or later, and is optimized for Tailwind CSS 3.x.
Installation
npm install @benface/tailwindcss-reset
Usage
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: true /* the plugin extends Preflight so make sure it is not disabled */,
},
plugins: [require("@benface/tailwindcss-reset")],
};
What it does
- Makes everything
position: relative
, so that absolutely positioned elements are relative to their parent by default. - Resets the
margin
andpadding
of all elements to0
. - Resets the
min-width
andmin-height
of all elements to0
, since the default isauto
which can cause overflow issues with flex items. - Resets
border-radius
to0
,background-color
totransparent
, andbackground-image
tonone
on all elements, just in case. - Sets better defaults for
background-position
(center center
) andbackground-repeat
(no-repeat
). - Makes some elements
display: block
by default (button
,input
,select
,textarea
,label
, andsummary
). - Makes the inheritable text properties (
color
,font
,text-align
,text-transform
, andletter-spacing
) inherit on form elements as well (button
,input
, etc.). - Changes the default
overflow
onsvg
elements fromhidden
tovisible
, to prevent clipping their edges (notably in Safari). - Removes opinionated styles set by user agent stylesheets and/or Preflight (see
reset.css
to see them all). - Enforces
display: none
on[hidden]
elements by adding!important
so that it cannot be overridden by utility classes.
What it does not do
- It doesn’t remove the default focus rings, as not all projects need custom focus styles.
- It doesn’t override the
font-weight: bolder
onb
andstrong
elements. - It doesn’t override the
font-style: italic
oni
andem
elements. - It doesn’t override the
text-decoration: underline
onu
andins
elements. - It doesn’t override the
text-decoration: line-through
ons
,strike
, anddel
elements. - It doesn’t override the
font-size
and positioning styles set by Preflight onsub
andsup
elements.