PHPackages szucs996/filament-tailwind-color-picker - 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. szucs996/filament-tailwind-color-picker ActiveLibrary[Utility & Helpers](/categories/utility) szucs996/filament-tailwind-color-picker ======================================= Specific Tailwindcss color picker for Filamentphp 010[4 PRs](https://github.com/Szucs996/filament-tailwind-color-picker/pulls)PHP Since May 29Pushed 2y ago1 watchersCompare [ Source](https://github.com/Szucs996/filament-tailwind-color-picker)[ Packagist](https://packagist.org/packages/szucs996/filament-tailwind-color-picker)[ RSS](/packages/szucs996-filament-tailwind-color-picker/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (5)Used By (0) Specific Tailwindcss color picker for Filamentphp ================================================= [](#specific-tailwindcss-color-picker-for-filamentphp) [![Latest Version on Packagist](https://camo.githubusercontent.com/ae4a6084ffaa0dc2973e49e0498167a680d31d2264cefef9a2ed654ef4361271/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6861707079746f6465762f66696c616d656e742d7461696c77696e642d636f6c6f722d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/happytodev/filament-tailwind-color-picker)[![GitHub Tests Action Status](https://camo.githubusercontent.com/71ff6296c0ae141ebd5575d560b57be6f5f2c0afbe44d6dfe2d34dc8050bf7ea/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6861707079746f6465762f66696c616d656e742d7461696c77696e642d636f6c6f722d7069636b65722f72756e2d74657374733f6c6162656c3d7465737473)](https://github.com/happytodev/filament-tailwind-color-picker/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/3f221117ddd102ef95692dcd78270a37d0856a20a3cdca0ce2932a60ec9694bc/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6861707079746f6465762f66696c616d656e742d7461696c77696e642d636f6c6f722d7069636b65722f466978253230504850253230636f64652532307374796c652532306973737565733f6c6162656c3d636f64652532307374796c65)](https://github.com/happytodev/filament-tailwind-color-picker/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/287358f03843d63a1a656624d6f4300894bc0d765f46ce5ba3d7043f2781af1e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6861707079746f6465762f66696c616d656e742d7461696c77696e642d636f6c6f722d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/happytodev/filament-tailwind-color-picker) This plugin add a field in Filament Form to help you to select color in the Tailwind color's palette. [![Banner](https://repository-images.githubusercontent.com/527925032/2ba4807c-602d-47e4-af39-1b0c2ecc6a7f)](https://repository-images.githubusercontent.com/527925032/2ba4807c-602d-47e4-af39-1b0c2ecc6a7f) Screenshots ----------- [](#screenshots) ### Single Tailwind Color Picker in Filament [](#single-tailwind-color-picker-in-filament) [![SCR-20220831-umu](https://user-images.githubusercontent.com/425998/187783109-a8b4f056-c521-4d38-8467-9b518870c261.png)](https://user-images.githubusercontent.com/425998/187783109-a8b4f056-c521-4d38-8467-9b518870c261.png) ### Code integration example [](#code-integration-example) [![SCR-20220831-usl](https://user-images.githubusercontent.com/425998/187783516-cf723e67-c125-4409-b134-a90f6c8d4f9c.png)](https://user-images.githubusercontent.com/425998/187783516-cf723e67-c125-4409-b134-a90f6c8d4f9c.png) ### Filament Tailwind Color Picker works perfectly with other filaments fields [](#filament-tailwind-color-picker-works-perfectly-with-other-filaments-fields) [![SCR-20220825-mge](https://user-images.githubusercontent.com/425998/187783569-d96e65ee-2eec-420f-9e03-881555aa7792.png)](https://user-images.githubusercontent.com/425998/187783569-d96e65ee-2eec-420f-9e03-881555aa7792.png) ### Responsive on 1280x1024 [](#responsive-on-1280x1024) [![1280x1024-SCR-20220831-w9u](https://user-images.githubusercontent.com/425998/187786047-2a5e0b96-fd4f-4b7a-a7ba-ba801894c898.png)](https://user-images.githubusercontent.com/425998/187786047-2a5e0b96-fd4f-4b7a-a7ba-ba801894c898.png) ### Responsive on iPhone 12 Pro [](#responsive-on-iphone-12-pro) [![390x844-iphone12pro-SCR-20220831-wdc](https://user-images.githubusercontent.com/425998/187786776-0b25d969-bfe0-46a9-a209-44aee0b55e17.png)](https://user-images.githubusercontent.com/425998/187786776-0b25d969-bfe0-46a9-a209-44aee0b55e17.png) Support us ---------- [](#support-us) [You can support the development of this open-source package here](https://github.com/sponsors/happytodev) Installation ------------ [](#installation) You need first a Filament installation working. For that, please read instructions on the Filament website. You can install the package via composer: ``` composer require happytodev/filament-tailwind-color-picker ``` Optionally, you can publish the views using ``` php artisan vendor:publish --tag="filament-tailwind-color-picker-views" ``` Usage ----- [](#usage) For adding a background color picker : ``` TailwindColorPicker::make('backgroundColor') ->bgScope(), ``` When user choose a color in the tailwindcss palette, the value returned by the form will be for example : `bg-red-300` For adding a text color picker : ``` TailwindColorPicker::make('backgroundColor') ->textScope(), ``` When user choose a color in the tailwindcss palette, the value returned by the form will be for example : `text-red-300` 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) - [Frédéric Blanc](https://github.com/happytodev) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 16 — LowBetter than 5% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity5 Limited adoption so far Community12 Small or concentrated contributor base Maturity27 Early-stage or recently created project Bus Factor1 Top contributor holds 81.8% of commits — single point of failure 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/ff1b9ed3ee0d173785dbcbbfd7e91a40223fa8830943b3223b02d8d83762d9ac?d=identicon)[szucs996](/maintainers/szucs996) --- Top Contributors [![happytodev](https://avatars.githubusercontent.com/u/425998?v=4)](https://github.com/happytodev "happytodev (72 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (6 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (6 commits)")[![Szucs996](https://avatars.githubusercontent.com/u/23578851?v=4)](https://github.com/Szucs996 "Szucs996 (3 commits)")[![devadattas](https://avatars.githubusercontent.com/u/56180?v=4)](https://github.com/devadattas "devadattas (1 commits)") ### Embed Badge ![Health badge](/badges/szucs996-filament-tailwind-color-picker/health.svg) ``` [![Health](https://phpackages.com/badges/szucs996-filament-tailwind-color-picker/health.svg)](https://phpackages.com/packages/szucs996-filament-tailwind-color-picker) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)