Preflight styles
Preflight is a set of base styles that are applied to your app by default. These styles are designed to make your app look consistent across different browsers and devices.
Preflight can be disabled by setting preflight
to false
in your jux.config
file.
export default defineConfig({ preflight: false,});
Here’s all the styles that are applied by preflight:
*, :before, :after, ::backdrop, ::file-selector-button { box-sizing: border-box; border: 0 solid;}
html, :host { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-tab-size: 4; tab-size: 4; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; line-height: 1.5;}
body { line-height: inherit; margin: 0;}
hr { color: inherit; border-top-width: 1px; height: 0;}
abbr:where([title]) { text-decoration: underline dotted;}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit;}
a { color: inherit; text-decoration: inherit;}
b, strong { font-weight: bolder;}
code, kbd, samp, pre { font-feature-settings: normal; font-variation-settings: normal; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New; font-size: 1em;}
small { font-size: 80%;}
sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative;}
sub { bottom: -.25em;}
sup { top: -.5em;}
table { text-indent: 0; border-color: inherit; border-collapse: collapse;}
button, input, optgroup, select, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; background: none;}
button, select { text-transform: none;}
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]), ::file-selector-button { -webkit-appearance: button; background-color: #0000; background-image: none;}
:-moz-focusring { outline: auto;}
:-moz-ui-invalid { box-shadow: none;}
progress { vertical-align: baseline;}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto;}
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px;}
::-webkit-search-decoration, ::-webkit-search-cancel-button { -webkit-appearance: none;}
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
summary { display: list-item;}
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0;}
fieldset { margin: 0; padding: 0;}
legend { padding: 0;}
ol, ul, menu { margin: 0; padding: 0; list-style: none;}
dialog { padding: 0;}
textarea { resize: vertical;}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, currentColor 50%, transparent); opacity: 1;}
:disabled { cursor: default;}
img { border-style: none;}
img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block;}
img, video { max-width: 100%; height: auto;}
[hidden] { display: none;}
You can override these styles by defining your own styles under globalCss
in your jux.config
file.