Tachyons Laravel Package

Getting Started

The preset is a one-shot scaffold, not a runtime dependency — you install it to rewrite Laravel's default frontend files, then the work happens in your app, not in the package.

composer require laravel-frontend-presets/tachyons
php artisan preset tachyons
npm install && npm run dev

Order matters. php artisan preset tachyons will overwrite package.json, webpack.mix.js, resources/assets/sass/app.scss, and the resources/views/welcome.blade.php / auth views — so run it on a clean tree, or commit first.

Where to look first:

• resources/assets/sass/app.scss — the Tachyons import chain plus any custom overrides.
• resources/views/welcome.blade.php — the reference implementation; read this before writing any markup, it establishes the class idiom the preset expects.
• vendor/laravel-frontend-presets/tachyons/src/ — the raw stub files, if you want to see exactly what the preset will clobber before running it.

First use case: run php artisan make:auth, then restyle resources/views/auth/login.blade.php using the utility classes from welcome.blade.php as a template. That gives you a full end-to-end loop (preset → auth scaffold → Mix build → rendered page) in about ten minutes, and it surfaces any Node/webpack issues early.

Once the build is green, npm run watch is the day-to-day companion.

Implementation Patterns

Utility-first markup directly in Blade. The preset's whole premise is that you stop writing component CSS and compose classes in the template:

<nav class="pa3 pa4-ns bg-near-black white">
  <a class="link dim white f6 f5-ns dib mr3" href="#">Docs</a>
</nav>

Repeated utility bundles (buttons, cards, form fields) belong in Blade partials or @includes, not in a stylesheet — that keeps the "no custom CSS" invariant intact.

Responsive prefixes, not media queries. Tachyons breakpoints are suffixes: base (mobile), -ns (≥30em), -m (≥48em), -l (≥64em). w-100 w-50-m w-25-l is the standard grid idiom. You should almost never write @media by hand; if you find yourself reaching for one, check the scale classes first.

Extending without abandoning the system. When you truly need something Tachyons doesn't ship, append to resources/assets/sass/app.scss after the Tachyons imports so your rules win on cascade order:

@import "~tachyons/css/tachyons.min.css";

// project-specific extensions only
.hero-gradient { background: linear-gradient(...); }

Keep these to a handful. A long override section is a signal you've drifted away from utility-first and should reconsider.

Fork the preset for team conventions. If you need a house style (custom auth views, a standard layout partial, extra Tachyons modules), fork the preset into presets/tachyons/ in your repo and point php artisan preset at it. This is the intended extension point — the upstream package is unlikely to accept your changes.

Mix configuration stays default. webpack.mix.js from the preset already wires app.scss → public/css/app.css and app.js. Add mix.version() for cache-busting and treat the rest as immutable unless you're adding PurgeCSS (see below).

Gotchas and Tips

• Laravel 5.5 only. The php artisan preset command was removed in Laravel 6. On 5.6+ the directory layout moved (resources/sass vs resources/assets/sass) and Mix was upgraded, so the preset's file targets won't line up. On any modern Laravel you'd port the stubs by hand — at which point you're better off installing tachyons from npm and copying the class patterns manually.
• The preset overwrites, silently. app.scss, webpack.mix.js, package.json, and the auth views are replaced without a backup. Commit or stash before running, git diff after, and cherry-pick what you want.
• Remove the package after the preset runs. It's scaffolding. composer remove laravel-frontend-presets/tachyons once the preset has fired leaves you with a cleaner composer.json and no orphaned service provider. Keep it as a --dev dependency only if you expect to re-run the preset.
• Unmaintained since Oct 2017. No Laravel 6+ support, no security advisories, no CI. Pin ^1.0 if you keep it, and treat every future Composer resolution as a review point.
• No PurgeCSS by default. Tachyons is ~14 KB gzipped, so it's tolerable unaugmented, but on 5.5-era Mix you can add laravel-mix-purgecss and scan your Blade files. Verify the safelist covers dynamically-built class strings (e.g. f{{ $size }}) — those purge silently.
• Class-name memorization is the real ramp-up cost. Spacing pa1–pa7, font sizes f1–f7, widths w1–w5, colors black-10/black-20/etc. Keep the Tachyons docs tab pinned; the compiler won't tell you a class name was wrong, it just won't render.
• Debug via the compiled bundle, not the source. When a class "doesn't work," grep public/css/app.css first. If it's there, the markup is wrong; if it's absent, the import chain or PurgeCSS is the culprit. Browser devtools → computed styles is faster than reasoning about cascade order.
• app.scss must import Tachyons before any custom rules. Reversing the order lets the framework's normalize/base layer override your additions and produces bewildering spacing bugs.
• Tachyons has no @apply. Unlike Tailwind, there's no way to compose utility bundles into a named class from the framework itself. If you find yourself wanting one, that's the moment to create a Blade partial — mixing partial-based composition with hand-written component CSS leads to two competing systems and, eventually, dead code.
• Auth views are just Blade. php artisan make:auth after the preset gives you styled views, but any subsequent make:auth will regenerate the default Laravel markup. If you re-run it, expect to re-apply the preset's views by hand or via your forked preset.