PHPackages                             happytodev/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. happytodev/filament-tailwind-color-picker

ActiveLibrary[Utility & Helpers](/categories/utility)

happytodev/filament-tailwind-color-picker
=========================================

Specific Tailwindcss color picker for Filamentphp

v0.1.9(3y ago)117349[6 PRs](https://github.com/happytodev/filament-tailwind-color-picker/pulls)1MITPHPPHP ^8.1

Since Aug 25Pushed 2y ago1 watchersCompare

[ Source](https://github.com/happytodev/filament-tailwind-color-picker)[ Packagist](https://packagist.org/packages/happytodev/filament-tailwind-color-picker)[ Docs](https://github.com/happytodev/filament-tailwind-color-picker)[ RSS](/packages/happytodev-filament-tailwind-color-picker/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (12)Versions (16)Used By (1)

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

30

—

LowBetter than 64% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community17

Small or concentrated contributor base

Maturity53

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 84.7% 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.

###  Release Activity

Cadence

Every ~9 days

Recently: every ~20 days

Total

10

Last Release

1273d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/b31cd186f639bcfaffa668063556cfe495baae03d56a7f0c69fba8383feecfc1?d=identicon)[happytodev](/maintainers/happytodev)

---

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)")[![devadattas](https://avatars.githubusercontent.com/u/56180?v=4)](https://github.com/devadattas "devadattas (1 commits)")

---

Tags

laravelhappytodevfilament-tailwind-color-picker

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/happytodev-filament-tailwind-color-picker/health.svg)

```
[![Health](https://phpackages.com/badges/happytodev-filament-tailwind-color-picker/health.svg)](https://phpackages.com/packages/happytodev-filament-tailwind-color-picker)
```

###  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)