Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Installation

This guide walks through installing Slate 3.x in a Laravel 12+ application with Tailwind CSS v4.

Prerequisites
  • PHP 8.3 or higher
  • Laravel 12.0+ (Laravel 13 when available)
  • Composer
  • Node.js and npm
  • Tailwind CSS v4 configured in your project

Step 1: Install via Composer

Install the 3.x development branch:

example.blade.php 
composer require electrik/slate:dev-3.x

Step 2: Import Slate CSS

Copy or reference Slate's stylesheet, then import it after Tailwind in your resources/css/app.css:

example.blade.php 
@import 'tailwindcss';
@import '../../vendor/electrik/slate/resources/css/slate.css';

slate.css ships with:

  • Slate-owned OKLCH tokens (--slate-*)
  • Tailwind v4 @theme inline mappings (bg-background, text-foreground, etc.)
  • A @source directive that scans Slate Blade components for class names

Import order matters: Tailwind first, then slate.css.

Optional: Typography plugin

If you render markdown/prose content, add the typography plugin:

example.blade.php 
@plugin '@tailwindcss/typography';

Step 3: Scan your app templates

Make sure Tailwind scans your Blade views (and Slate's views if you vendor-copy components):

example.blade.php 
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../vendor/electrik/slate/resources/views/**/*.blade.php';

Step 4: Build assets
example.blade.php 
npm run build

Or during development:

example.blade.php 
npm run dev

Step 5: Use components

Components are registered automatically via Slate's service provider:

example.blade.php 
<x-slate::button>Click me</x-slate::button>

Verify the install
  1. Add a test route:
example.blade.php 
Route::get('/test-slate', fn () => view('test-slate'));
  1. Create resources/views/test-slate.blade.php:
example.blade.php 
<x-slate::button>Test Button</x-slate::button>
  1. Visit /test-slate — you should see a styled button.

Troubleshooting

Components not styled
  • Run npm run build or npm run dev
  • Confirm slate.css is imported after @import 'tailwindcss'
  • Confirm @source includes Slate's Blade views

Dark mode

Toggle the .dark class on <html>. Use <x-slate::dark-mode-toggle /> or your own theme switcher.

Next steps
Last updated .