3.1.1 • Published 2 years ago
@benface/tailwindcss-reset v3.1.1
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.