Defaults

Default styles or rules applied to certain HTML elements or pseudo-elements. These are very much optional.

• src/base/default.css

::after, ::before {
  --tw-content: "";
}

:where(*),
:where(*)::before,
:where(*)::after {
  border: 0 solid currentColor;
}

::selection {
  color: var(--color-light);
  background-color: var(--color-primary);
}

:where([tabindex]) {
  outline: 0;
}

:where(button:enabled),
:where([type="checkbox"]:enabled),
:where([type="radio"]:enabled),
:where(summary:not([aria-disabled="true"])),
:where([role="button"]:not([aria-disabled="true"])) {
  cursor: var(--cursor, pointer);
  user-select: none;
}

:where(svg:not([width])) {
  width: 1.25rem;
}

:where(svg:not([height])) {
  height: 1.25rem;
}

:where(hr) {
  --tw-border-opacity: 0.15;

  border-block-start: 1px solid color-mix(in var(--space), currentColor calc(var(--tw-border-opacity) * 100%), transparent);
  border-radius: var(--rounded);
  width: 100%;
}

:where(code) {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-body-secondary);
  border-radius: var(--rounded-sm);
  color: var(--color-accent);
}

:where(kbd) {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-body-secondary);
  border-radius: var(--rounded-sm);
  border: 1px solid var(--color-body-tertiary);
}

:where(html) {
  color-scheme: var(--scheme);
  font-family: var(--font-primary);
  font-weight: var(--font-normal);
  block-size: 100%;
  line-height: 1.5;
  text-size-adjust: 100%;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

:where(body) {
  min-block-size: 100%;
  background-color: var(--color-body);
  color: var(--color-main);
  accent-color: var(--color-accent);
}

Tailwind

Applies --tw-content to all pseudo-elements and zero border to all elements or pseudo-elements.

Cursor

Default cursor: pointer for clickable elements, you can change this globally via CSS property --cursor if you prefer more application like behaviour.

Svg

Set the default size of an SVG as a small square if neither width nor height is specified.

<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" />
</svg>

Hr

Just a horizontal rule.

---

<hr>

Code

<code>Cool code</code>

Kbd

<kbd>Ctrl+C/⌘+C</kbd>

Html & Body

Basic text and color properties