New features
Dark mode emulator
Open the command dialog (Ctrl/Cmd + K, or just /) and toggle the dark mode emulator to get an approximation of how email clients auto-invert your colors in their "dark mode" UIs.
Note that this inversion that we do does not 100% reflect the algorithms email clients use to invert colors, some things may look different in an actual inbox.
<Font>
Use the new <Font> component to pull in a webfont from Google Fonts, Bunny Fonts, or any custom URL that returns a CSS resource with @font-face declarations.
Place it anywhere you want, it'll be automatically teleported to the <head>:
<template>
<Font family="Lobster" />
<Container>...</Container>
</template>You can use the provider prop to switch to the more privacy-focused Bunny Fonts:
<Font
family="Open Sans"
provider="bunny"
display="swap"
:weights="[400, 700]"
fallback="'Segoe UI', sans-serif"
/>It:
- defaults to Google Fonts
- adds
<link>, registers.font-*utility - IDE-autocompletes for top 25 Google Fonts
- supports Custom URLs (Bunny, Fontsource, anything)
- does fallback stacks automatically
Updated
Layout components
We've updated the layout components to truly reflect our "Tailwind as a first-class citizen" philosophy. So you can now simply use Tailwind utilities on Containers/Sections/Rows/Columns, it'll all be handled internally and just work:
<template>
<Container class="max-w-xl">
<Section>
<Row>
<Column>1</Column>
<Column>2</Column>
</Row>
</Section>
</Container>
</template>Full commits list:
- fix: scope component id counter outside <script setup> a6c7105
- refactor: layout components width calculations 6bd56c7
- refactor: section component 231fdf3
- refactor: container component d362b54
- fix: add alt attribute to button component images 1fa4623
- fix(font): emit plain font utility when tailwind import is missing 34ddca9
- feat: add font component c636c41
- fix: merge component classes with user provided ones a085927
- refactor: move emulator to command dialog b80df96
- fix: toggle sidebar keybinding 7179f83
- feat: emulate dark mode 2f13db7
- fix: copying code to clipboard c9c3499