Open Source 03 / 34
Tails
Tails is DevDojo's Tailwind page builder, plus the devdojo/tails Composer package that fetches the designs you build there into any Laravel app — by route or with the @tails Blade directive.
Tails is DevDojo's Tailwind CSS page builder — the tool for assembling landing pages and marketing designs out of prebuilt blocks. It ships alongside the devdojo/tails Composer package, which pulls those finished designs into a Laravel application. The builder half has since grown into the hosted DevDojo Sites experience; this page documents the open-source package that consumes Tails designs.
Two halves. The builder is where you design (now Sites). The package — devdojo/tails — is a small Laravel integration that fetches a published design over the API and renders it in your own app. This page is about the package.
Installing the package
composer require devdojo/tails
The package registers a TailsServiceProvider and a Tails facade automatically via Laravel package discovery. Publish its config with:
php artisan vendor:publish --tag=tails
That drops a config/tails.php you can tune:
return [
'api_key' => env('TAILS_API_KEY', null),
'api_endpoint' => 'https://devdojo.com/api/v1',
'webhook_key' => env('TAILS_WEBHOOK_KEY', null),
'webhook_url' => env('TAILS_WEBHOOK_URL', 'tails/webhook'),
// Convert custom HTML tags into Blade at fetch time.
'blade_tags' => [
'<userloop>' => '@foreach(\App\Models\User::all() as $user)',
'</userloop>' => '@endforeach',
],
'directory' => base_path(env('TAILS_DIRECTORY', 'storage/app/tails-tmp')),
];
Generate a developer API key from your Tails account, add it to .env as TAILS_API_KEY=…, and confirm the connection:
php artisan tails:ping
A pong response means you're authenticated.
Rendering a design on a route
The quickest integration is to map a route straight to a Tails project by its slug. The package registers a global Tails facade alias, so you can call it directly in routes/web.php:
Tails::get('/', 'my-website');
That serves the homepage of the my-website project at /. The route doesn't have to match — Tails::get('welcome', 'my-website') loads the design at /welcome. To reach a specific page inside a project, use dot notation:
Tails::get('about', 'my-website.about');
Rendering a design inside a Blade view
To embed a design in an existing Blade file rather than owning a whole route, use the @tails directive:
@tails('my-website')
@tails('my-website.about')
By default the directive returns only the <body> content of the design. Append a : selector to reach other parts of the API response — full HTML, header, footer, or specific project/page fields:
@tails('my-website:html')
@tails('my-website:header')
@tails('my-website:footer')
@tails('my-website:project.title')
@tails('my-website:page.styles')
A common pattern is to inline the page's compiled Tailwind styles and then drop in the body:
<style>
@tails('my-website:page.styles')
</style>
@tails('my-website')
The : selectors map onto the structured API response, which exposes html, header, body, footer, a project object (title, slug, icon, custom head/footer, CDN links, timestamps), and a page object (title, slug, styles, order, and an array of components).
Caching and the webhook
To keep page loads fast, the package caches fetched designs on your app's side, so visitors never wait on a round-trip to the Tails API. The trade-off is staleness: your app needs to know when a design changes. The webhook solves that.
Enable the webhook in the Tails project settings and point it at your app's /tails/webhook route (already registered by the package; override with TAILS_WEBHOOK_URL). Copy the webhook key into .env:
TAILS_WEBHOOK_KEY=your-webhook-key
Now, whenever you save a page in Tails, it pings your app with the pages to invalidate, and the next visitor gets the fresh version. You can also clear the cache manually:
php artisan tails:clear
Local webhooks. The webhook needs to reach your app from the public internet. In local development, expose your site with a tunnel like Expose or ngrok and use the HTTPS URL.
Where it fits
The devdojo/tails package is the bridge between the design experience and an app you already run. If instead you want DevDojo to host the finished site, publish it with Sites. For the wider toolbox, see the open source overview.