PHPackages reinbier/php-tailwind-colors - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. reinbier/php-tailwind-colors ActiveLibrary[Utility & Helpers](/categories/utility) reinbier/php-tailwind-colors ============================ For using & generating TailwindCSS colors in Laravel v1.0.0(2y ago)36031[5 PRs](https://github.com/Reinbier/php-tailwind-colors/pulls)MITPHPPHP ^8.2CI passing Since Apr 22Pushed 1mo ago1 watchersCompare [ Source](https://github.com/Reinbier/php-tailwind-colors)[ Packagist](https://packagist.org/packages/reinbier/php-tailwind-colors)[ Docs](https://github.com/reinbier/php-tailwind-colors)[ GitHub Sponsors](https://github.com/reinbier)[ RSS](/packages/reinbier-php-tailwind-colors/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (14)Versions (6)Used By (0) For using & generating TailwindCSS colors in Laravel ======================================================== [](#for-using--generating-tailwindcss-colors-in-laravel) [![Latest Version on Packagist](https://camo.githubusercontent.com/4fee7175fb721f6f8d53142276b8be4396439604f7db324847713106e7969753/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7265696e626965722f7068702d7461696c77696e642d636f6c6f72732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/reinbier/php-tailwind-colors)[![GitHub Tests Action Status](https://camo.githubusercontent.com/3559d92436c458f72f56f1feae793c77a00e114c6050d2e7e770042a6cca96d2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7265696e626965722f7068702d7461696c77696e642d636f6c6f72732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/reinbier/php-tailwind-colors/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/ba8ce60ea7d7a953b9b6cfcca133e894de99a5290bd9037bf678e0840c0cbb79/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7265696e626965722f7068702d7461696c77696e642d636f6c6f72732f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/reinbier/php-tailwind-colors/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/ac9dab41578e92c9f53256fad73cb6dabae60bd136406a6f522d61c2b5c8f8fe/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7265696e626965722f7068702d7461696c77696e642d636f6c6f72732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/reinbier/php-tailwind-colors) **NOTE**: This package is based on same Color Generator [FilamentPHP](https://filamentphp.com/) uses to generate shades of TailwindCSS colors. Installation ------------ [](#installation) You can install the package via composer: ``` composer require reinbier/php-tailwind-colors ``` Usage ----- [](#usage) The package enables you to generate your own default color variables or register your own custom TailwindCSS colors for use in your HTML. Simply add the Blade directive `@tailwindColors` to your HTML to gain access to these variables. ``` My page @tailwindColors ... ``` This outputs: ``` :root { --danger-50: 254, 242, 242; --danger-100: 254, 226, 226; --danger-200: 254, 202, 202; --danger-300: 252, 165, 165; --danger-400: 248, 113, 113; --danger-500: 239, 68, 68; --danger-600: 220, 38, 38; --danger-700: 185, 28, 28; --danger-800: 153, 27, 27; --danger-900: 127, 29, 29; --danger-950: 69, 10, 10; --gray-50: 250, 250, 250; --gray-100: 244, 244, 245; --gray-200: 228, 228, 231; (...) --warning-800: 146, 64, 14; --warning-900: 120, 53, 15; --warning-950: 69, 26, 3; } ``` With default colors from the `Color` class, being: ``` use Reinbier\PhpTailwindColors\Color; $colors = [ 'danger' => Color::Red, 'gray' => Color::Zinc, 'info' => Color::Blue, 'primary' => Color::Indigo, 'success' => Color::Green, 'warning' => Color::Amber, ]; ``` Now you can use these variables in your CSS files. These default colors also come with a Tailwind `preset` file. To make use of these defaults as Tailwind classes like you're used to, you need to import this preset in your existing `tailwind.config.js`. ``` import preset from './vendor/reinbier/php-tailwind-colors/tailwind.config.preset' export default { presets: [preset], content: [ ... ], } ``` Register colors --------------- [](#register-colors) The generated CSS variables are mapped to Tailwind classes in the preset file and can be customized. To generate entirely new colors, please read 'Registering extra colors' below. ### Customizing the default colors [](#customizing-the-default-colors) From a service provider's `boot()` method, or middleware, you can call the `TailwindColor::register()` method, which you can use to customize the default colors. There are 6 default colors that are used, like mentioned above: The `Color` class contains every [Tailwind CSS color](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) to choose from. ### Using a non-Tailwind color [](#using-a-non-tailwind-color) You can use custom colors that are not included in the [Tailwind CSS color](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) palette by passing an array of color shades from `50` to `950` in RGB format: ``` use Reinbier\PhpTailwindColors\Facades\TailwindColor; TailwindColor::register([ 'danger' => [ 50 => '254, 242, 242', 100 => '254, 226, 226', 200 => '254, 202, 202', 300 => '252, 165, 165', 400 => '248, 113, 113', 500 => '239, 68, 68', 600 => '220, 38, 38', 700 => '185, 28, 28', 800 => '153, 27, 27', 900 => '127, 29, 29', 950 => '69, 10, 10', ], ]); ``` ### Generating a custom color from a hex code [](#generating-a-custom-color-from-a-hex-code) You can use the `Color::hex()` method to generate a custom color palette from a hex code: ``` use Reinbier\PhpTailwindColors\Color; use Reinbier\PhpTailwindColors\Facades\TailwindColor; TailwindColor::register([ 'danger' => Color::hex('#ff0000'), ]); ``` ### Generating a custom color from an RGB value [](#generating-a-custom-color-from-an-rgb-value) You can use the `Color::rgb()` method to generate a custom color palette from an RGB value: ``` use Reinbier\PhpTailwindColors\Color; use Reinbier\PhpTailwindColors\Facades\TailwindColor; TailwindColor::register([ 'danger' => Color::rgb('rgb(255, 0, 0)'), ]); ``` ### Registering extra colors [](#registering-extra-colors) You can register extra colors that you can use throughout your app: ``` use Reinbier\PhpTailwindColors\Color; use Reinbier\PhpTailwindColors\Facades\TailwindColor; TailwindColor::register([ 'mycolor' => Color::hex('#ffff00'), ]); ``` Now, when you want to use this color in your HTML (like `text-mycolor-300` or `bg-mycolor-950`), you should append it to your colors in your `tailwind.config.js` file, and rebuild your assets: ``` export default { // other tailwind configuration... theme: { extend: { colors: { mycolor: { 50: 'rgba(var(--mycolor-50), )', 100: 'rgba(var(--mycolor-100), )', 200: 'rgba(var(--mycolor-200), )', 300: 'rgba(var(--mycolor-300), )', 400: 'rgba(var(--mycolor-400), )', 500: 'rgba(var(--mycolor-500), )', 600: 'rgba(var(--mycolor-600), )', 700: 'rgba(var(--mycolor-700), )', 800: 'rgba(var(--mycolor-800), )', 900: 'rgba(var(--mycolor-900), )', 950: 'rgba(var(--mycolor-950), )', }, } } } } ``` ==> Finally, build your assets and you're all set! Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [reinbier](https://github.com/reinbier) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 39 — LowBetter than 86% of packages Maintenance60 Regular maintenance activity Popularity17 Limited adoption so far Community11 Small or concentrated contributor base Maturity57 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 756d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/312abbf8efd2ed8be5230a106e6284455fe65f200e20f05d48c9b872ecb215ca?d=identicon)[reinbier](/maintainers/reinbier) --- Top Contributors [![Reinbier](https://avatars.githubusercontent.com/u/7080398?v=4)](https://github.com/Reinbier "Reinbier (8 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (7 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (6 commits)") --- Tags laravelReinbierphp-tailwind-colors ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/reinbier-php-tailwind-colors/health.svg) ``` [![Health](https://phpackages.com/badges/reinbier-php-tailwind-colors/health.svg)](https://phpackages.com/packages/reinbier-php-tailwind-colors) ``` ### Alternatives [spatie/laravel-data Create unified resources and data transfer objects 1.7k28.9M627](/packages/spatie-laravel-data)[spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard)[hirethunk/verbs An event sourcing package that feels nice. 513162.9k6](/packages/hirethunk-verbs)[worksome/exchange Check Exchange Rates for any currency in Laravel. 123544.7k](/packages/worksome-exchange)[ralphjsmit/livewire-urls Get the previous and current url in Livewire. 82270.3k4](/packages/ralphjsmit-livewire-urls)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)