Reset

New modern CSS reset, that means Preflight from TailwindCSS is disabled by default. You can always enable it again via tailwind.config.js if you prefer it more.
Everything except Defaults is unstyled, so you are free to style your components or use pre-built components.
src/base/reset.css
css
/* Reset all */
:where(a),
:where(address),
:where(button),
:where(blockquote),
:where(body),
:where(caption),
:where(cite),
:where(code),
:where(dd),
:where(details),
:where(dialog),
:where(dl),
:where(dt),
:where(em),
:where(fieldset),
:where(figcaption),
:where(figure),
:where(h1, h2, h3, h4, h5, h6),
:where(hgroup),
:where(hr),
:where(html),
:where(input),
:where(kbd),
:where(label),
:where(legend),
:where(li),
:where(mark),
:where(menu),
:where(ol),
:where(optgroup),
:where(option),
:where(output),
:where(p),
:where(pre),
:where(select),
:where(summary),
:where(table),
:where(td),
:where(textarea),
:where(th),
:where(thead),
:where(time),
:where(tr),
:where(ul),
:where(progress),
:where(meter) {
  all: unset;
  display: revert;
}

/* Revert table vertical-align */
:where(tr, th, td),
:where(thead, tbody, tfoot) {
  vertical-align: revert;
  background-color: inherit;
}

/* Reset block */
:where(img),
:where(svg),
:where(video),
:where(canvas),
:where(audio),
:where(iframe),
:where(embed),
:where(object),
:where(search),
:where(hr),
:where(summary),
:where(pre > code) {
  display: block;
}

/* Improve consistency of default fonts in all browsers. */
:where(code), :where(kbd), :where(samp), :where(pre) {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
}

/* Preferred box-sizing value */
:where(*),
:where(*)::before,
:where(*)::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgb(255 255 255 / 0%);
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
:where(sub, sup) {
  vertical-align: baseline;
  font-size: 100%;
}

:where(sub) {
  font-variant-position: sub;
}

:where(sup) {
  font-variant-position: super;
}

/* Add the correct text decoration in Chrome, Edge, and Safari. */
:where(abbr[title]) {
  text-decoration: underline dotted;
}

/* Reapply the pointer cursor for anchor tags */
:where(a, button) {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
:where(ol:not([type]), ul, menu) {
  list-style-type: "";
}

/* For images to not be able to exceed their container */
:where(img, iframe) {
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* removes spacing between cells in tables */
:where(table) {
  border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
:where(input, textarea) {
  user-select: auto;
  cursor: revert;
}

/* revert the 'white-space' property for textarea elements on Safari */
:where(textarea) {
  white-space: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
  -webkit-user-drag: element;
}

/* Fix input styles */
:where(input) {
  &::-webkit-datetime-edit-fields-wrapper,
  &::-webkit-datetime-edit-text,
  &::-webkit-datetime-edit,
  &::-webkit-datetime-edit-hour-field,
  &::-webkit-datetime-edit-minute-field {
    padding: 0;
  }

  &::-webkit-calendar-picker-indicator,
  &::-webkit-search-cancel-button {
    align-self: center;
    background-position: 50% 50%;
  }
}

/* Remove details summary webkit styles */
::-webkit-details-marker {
  display: none;
}
Reset ​

Reset
