vlados/filament-tailscale-theme
A Tailscale-inspired theme for Filament admin panels that gives Laravel apps a clean, modern UI with Tailscale-style colors and styling across dashboards, resources, tables, and forms. Simple to install and customize.
This is a presentation-layer package for Filament panels — it ships CSS (not PHP APIs) that restyles buttons, tables, cards, widgets, inputs and badges. There is essentially no runtime logic to wire up, so "getting started" is mostly about installation and asset publishing.
Minimal setup:
composer require the package (check the README for the exact vendor name — the dist file is filament-tailscale-theme.css).
Register the theme on each panel you want styled, typically in a PanelProvider:
->viteTheme('resources/css/filament/admin/theme.css') // if you're layering on top
// or follow the package's documented registration step for its published CSS
Publish the package's assets so resources/dist/filament-tailscale-theme.css lands in your app, then reference it from your Filament theme CSS (@import or your panel's ->theme()/->viteTheme() config as documented).
Run php artisan filament:assets (and npm run build if you use Vite theming) and hard-refresh the browser.
Where to look first:
resources/dist/filament-tailscale-theme.css) — this is the source of truth for what actually renders. If a style isn't applying, confirm this file exists and is current.PanelProvider.First use case: drop it on an admin panel to get flat, border-driven surfaces and consistent rounding without hand-writing a theme. If you're already maintaining a custom Filament theme, treat this as a reference stylesheet to borrow from rather than a black box to stack on top — the two will fight over the same selectors.
Layered theme (recommended). Keep the package's CSS as a base and put your brand overrides in a separate file imported after it. This survives package upgrades because you're not editing published files:
/* resources/css/filament/admin/theme.css */
@import 'filament-tailscale-theme.css';
@import './overrides.css'; /* your brand tokens last */
Panel-scoped application. Register the theme only on the panels that want it (e.g. admin, not customer-facing portal). Filament resolves themes per-panel, so you can keep the default look elsewhere.
Override via CSS custom properties / utility classes first. Flattened surfaces mean the package removed shadows from sections, widgets, tables and cards. If you want elevation back on a specific component, do it with a scoped selector on your own wrapper class rather than re-adding box-shadows globally — the package deliberately normalizes rounding and borders, and blanket overrides reintroduce the inconsistency it's fixing.
Secondary button restyling. v1.0.2 replaced the inset ring on secondary buttons with a defined gray hairline border plus hover/focus states. If your app has custom "secondary" or "ghost" buttons, mirror that pattern (border + hover/focus-visible + icon contrast) so custom buttons don't look out of place next to the themed ones.
Build pipeline for contributors/forkers. v1.0.2 added a Vite build step compiling resources/css/index.css → resources/dist/filament-tailscale-theme.css. If you vendor or fork the package to customize, you now need Node/Vite in your pipeline:
npm install
npm run build # regenerates resources/dist/filament-tailscale-theme.css
If you consume the package as-is, you can ignore this entirely — just use the shipped dist file.
Class-targeting hygiene. Since the package keys off Filament's generated class names, any custom CSS you wrote against Filament internals is fragile. Centralize such overrides in one file with a comment noting which Filament class each rule targets, so the next Filament upgrade (or package bump) surfaces them quickly.
The .fi-btn-outlined → .fi-outlined rename is the one thing to audit. v1.0.2 fixes the package's own selectors, but if you wrote overrides targeting .fi-btn-outlined (likely, if you customized outlined button fills), those overrides are now dead. Grep your theme for fi-btn-outlined and update. This is the highest-risk item in the release despite being a "theme fix."
v1.0.2 supersedes v1.0.1. v1.0.1 shipped the same CSS fixes; v1.0.2 adds the Vite build step and internal PHP type-hint formatting normalization. If you already pulled v1.0.1, jumping to v1.0.2 is a no-op CSS-wise plus tooling. Don't run both.
Type-hint formatting changes are cosmetic. "Normalizes internal PHP type-hint formatting" is style-only — not a signature change. Still, if you've patched vendor files or extended any PHP classes from the package, re-check after upgrade; formatting-only diffs can mask real changes when skimming.
No shadow ≠ no depth. Flattening removed shadows from sections, widgets, tables and cards. If your UI relied on shadow to convey elevation or clickability, verify affordances still read — hover states on cards/tables may now be your only cue. Worth a quick visual pass on dashboards and any card-heavy pages.
Buttons/inputs/badges now share rounding. If you had intentionally square or pill-shaped custom components, they'll clash with the unified rounding. Override deliberately, not by accident.
Secondary button hairline border needs contrast checking. A "defined gray hairline border" can disappear on light gray backgrounds or in dark mode. Check both light and dark themes, and confirm focus-visible is actually visible for keyboard users.
Cache and assets are the first suspect for "styles didn't apply." Clear Filament component/asset caches and rebuild:
php artisan filament:assets
php artisan optimize:clear
npm run build
Then hard-refresh (disable browser cache in devtools) — the browser will happily serve the old dist CSS.
Extension point is CSS, not config. There's no documented runtime config surface here; customization is done by overriding selectors or supplying CSS variables after the import. Treat any published file as regenerable and keep your changes in your own file so a vendor:publish --force doesn't wipe them.
Version pinning. Given the class-rename history, pin to ^1.0.2 rather than a loose constraint — earlier 1.x lines target the old outlined-button class and will render differently in ways that are hard to diagnose from a composer.lock diff.
How can I help you explore Laravel packages today?