happytodev / filament-tailwind-color-picker

Specific Tailwindcss color picker field for Filamentphp

Specific Tailwindcss color picker for Filamentphp

This plugin add a field in Filament Form to help you to select color in the Tailwind color's palette.

Screenshots

Single Tailwind Color Picker in Filament

Code integration example

Filament Tailwind Color Picker works perfectly with other filaments fields

Responsive on 1280x1024

Responsive on iPhone 12 Pro

Support us

You can support the development of this open-source package here

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

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

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Frédéric Blanc
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

filament-tailwind-color-picker's Issues

Dark mode error

I have a problem with dark mode, after install this plugin. Im using vite I don't know if something related:

darkome_AdobeExpress.mp4

Getting Error when views are not published

I get the following error if I don't run the optional view publication command i.e. php artisan vendor:publish --tag="filament-tailwind-color-picker-views"

View [vendor.filament-tailwind-color-picker.forms.components.tailwind-color-picker] not found.

Feature Request: hexScope

As the title says. I would welcome a feature to return the hex value of the selected color, instead of the class name.

   TailwindColorPicker::make('backgroundColor')
           ->hexScope(),

returning a hex code, like:
#f59e0b

(PS: tried to post this as a feature request instead of bug repot, but github was not allowing it, for some reason)

illuminate/contracts dependency issue for Laravel 10

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires happytodev/filament-tailwind-color-picker * -> satisfiable by happytodev/filament-tailwind-color-picker[v0.1.0, ..., v0.1.9].
    - happytodev/filament-tailwind-color-picker[v0.1.0, ..., v0.1.9] require illuminate/contracts ^9.0 -> found illuminate/contracts[v9.0.0, ..., v9.52.1] but these were not loaded, likely because it conflicts with another require.

You can also try re-running composer require with an explicit version constraint, e.g. "composer require happytodev/filament-tailwind-color-picker:*" to figure out if any version is installable, or "composer require happytodev/filament-tailwind-color-picker:^2.1" if you know which you need.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.