Reset

New modern CSS reset, that means Preflight from TailwindCSS is disabled by default.
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(input),
:where(kbd),
:where(label),
:where(legend),
:where(li),
:where(mark),
:where(menu),
:where(ol),
:where(optgroup),
:where(option),
:where(output),
:where(p),
:where(select),
:where(summary),
:where(table),
:where(td),
:where(textarea),
:where(th),
:where(thead),
:where(time),
:where(tr),
:where(ul),
:where(progress),
:where(meter),
:where([popover]) {
  all: unset;
  display: revert;
}

:where([popover]) {
  position-anchor: auto;
}

/* 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;
  background-color: 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"])) {
  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
