Turn any website into a Tailwind theme.
Mira reads a site's colors and fonts and writes them as a Tailwind v4 theme and a v3 config.
What goes in the file
tailwind.css is a Tailwind v4 @theme block. Each palette color becomes --color-brand- followed by the role Mira gave it. The surface, ink and accent the report chose come in as --color-surface, --color-ink and --color-accent, with the text-safe variants Mira derives for contrast: accent-text, on-accent and muted. The display and body families become --font-display and --font-body.
tailwind.config.js holds the same colors and fonts for Tailwind v3, under theme.extend.
Using it
Import tailwind.css after tailwindcss in your main stylesheet, then use the names as utilities, such as bg-surface, text-ink or font-display. Both files come in the swatch pack ZIP, with the .ase, Procreate and design-token files.
Questions
Does Mira support Tailwind v3?
Yes. The swatch pack has tailwind.config.js for v3 next to tailwind.css for v4. Both carry the same colors and fonts.
What are the colors called in the theme?
Each palette color is named brand- followed by the role Mira gave it, and a second color with the same role gets a number. The surface, ink and accent the report chose keep those names.
Which websites work with Mira?
Most server-rendered websites work. Sites that block datacenter traffic or serve a bot challenge, such as Amazon, may not return content to the web version. The native macOS app crawls from your own connection and gets through more often.
Is Mira free?
Yes. Mira is free to use and needs no account or sign-in.