Preflight

An opinionated set of base styles for xstyled projects.

Inspired from Tailwind's Preflight and build on top of modern-normalize, Preflight is a set of base styles for xstyled projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

Preflight is available as a Global Style React Component, when mounted styles are automatically injected.

import { Preflight } from '@xstyled/...'

function App() {
  return (
    <>
      <Preflight />
      {/* ... */}
    </>
  )
}

Default margins are removed

Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

This makes it harder to accidentally rely on margin values applied by the user-agent stylesheet that are not part of your spacing scale.

Headings are unstyled

All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text.

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

The reason for this is two-fold:

• It helps you avoid accidentally deviating from your type scale. By default, the browsers assigns sizes to headings that don't exist in Tailwind's default type scale, and aren't guaranteed to exist in your own type scale.
• In UI development, headings should often be visually de-emphasized. Making headings unstyled by default means any styling you apply to headings happens consciously and deliberately.

You can always add default header styles to your project by adding your own base styles.

Lists are unstyled

Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding.

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

If you'd like to style a list, you can do so using the listStyleType and listStylePosition utilities:

<x.ul listStyleType="disc" listStylePosition="inside">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</x.ul>

You can always add default header styles to your project by adding your own base styles.

Images are block-level

Images and other replaced elements (like svg, video, canvas, and others) are display: block by default.

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

This helps to avoid unexpected alignment issues that you often run into using the browser default of display: inline.

If you ever need to make one of these elements inline instead of block, simply use the display="inline" utility:

<x.img display="inline" src="..." alt="..." />

Border styles are reset globally

In order to make it easy to add a border by simply adding the border utility, xstyled overrides the default border styles for all elements with the following rules:

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: ${th.color('default-border-color', 'currentColor')};
}

Since the border utiity only sets the border-width and border-style property, this reset ensures that adding that class always adds a solid 1px border using your configured default border color.

This can cause some unexpected results when integrating certain third-party libraries, like Google maps for example.

When you run into situations like this, you can work around them by overriding the Preflight styles with your own custom CSS:

.google-map * {
  border-style: none;
}

Buttons have a default outline

To ensure that we provide accessible styles out of the box, we made sure that buttons have a default outline. You can of course override this by applying ring or similar utilities to your buttons.

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

Buttons have pointer

To ensure accessibility, buttons have pointer.

/* Role button pointer */
[role='button'],
button {
  cursor: pointer;
}

Default ring color

A default ring color is added by Preflight to ensure that default ring utility color is good.

* {
  --x-ring-color: ${th.color('default-ring-color', 'rgba(59,130,246,0.5)')};
}

Extending Preflight

You can't extend or modify Preflight, however you can additional add base styles.