danielebuso / laravel-tailette
A Laravel package for generating Tailwind CSS color palettes
Requires
- php: ^8.0
- illuminate/support: ^8.0|^9.0|^10.0
Requires (Dev)
- orchestra/testbench: ^6.0|^7.0|^8.0
- pestphp/pest: ^2.36
README
A Laravel package for generating Tailwind CSS color palettes from a base color.
Installation
You can install the package via composer:
composer require danielebuso/laravel-tailette
The package will automatically register its service provider if you're using Laravel >= 5.5 with package auto-discovery.
Publishing the config file
You can publish the config file with:
php artisan vendor:publish --tag="tailette-config"
This will publish the config file to config/tailette.php
where you can modify the default settings:
return [ // Default color palette (blue) 'default_palette' => [ '50' => '#eff6ff', '100' => '#dbeafe', // ... ], // Cache duration in minutes (1 day by default) 'cache_duration' => 60 * 24, ];
Usage
Basic Usage
use DanieleBuso\Tailette\Facades\Tailette; // Generate a palette from a hex color (with or without #) $palette = Tailette::generate('#3b82f6'); // or $palette = Tailette::generate('3b82f6'); // The result is a collection with keys 50, 100, 200, ..., 950 // Each value is a hex color code echo $palette['500']; // #3b82f6 (the original color) echo $palette['200']; // A lighter shade echo $palette['800']; // A darker shade
Without Caching
If you need to bypass the cache (for testing or other purposes):
$palette = Tailette::generatePalette('3b82f6');
Using in Blade Templates
<div class="bg-[{{ Tailette::generate('3b82f6')['500'] }}]"> This div has a background color of the base color </div> <div class="bg-[{{ Tailette::generate('3b82f6')['200'] }}]"> This div has a background color of a lighter shade </div>
Using with Tailwind Config
You can use this package to dynamically generate color palettes for your Tailwind config:
// tailwind.config.js const colors = require('./colors.json'); module.exports = { theme: { extend: { colors: colors, }, }, // ... }
Then in your Laravel application, you can generate the colors.json file:
$colors = [ 'primary' => Tailette::generate('#3b82f6')->toArray(), 'secondary' => Tailette::generate('#10b981')->toArray(), // Add more colors as needed ]; file_put_contents( public_path('colors.json'), json_encode($colors, JSON_PRETTY_PRINT) );
Testing
composer test
License
The MIT License (MIT). Please see License File for more information.