PHPackages                             pixelpillow/statamic-tailwind-color-field - 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. pixelpillow/statamic-tailwind-color-field

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

pixelpillow/statamic-tailwind-color-field
=========================================

This Statamic field type lets you choose Tailwind color names for use in the frontend.

v1.0.0(2y ago)01682Vue

Since Jan 18Pushed 1y ago2 watchersCompare

[ Source](https://github.com/pixelpillow/statamic-tailwind-color-field)[ Packagist](https://packagist.org/packages/pixelpillow/statamic-tailwind-color-field)[ RSS](/packages/pixelpillow-statamic-tailwind-color-field/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (2)Versions (2)Used By (0)

Tailwind color Field
====================

[](#tailwind-color-field)

Tailwind color field is a Statamic addon that lets you define your Tailwind colors and use them in your blueprints.

Field in action: [![Scherm­afbeelding 2024-01-18 om 12 04 47](https://private-user-images.githubusercontent.com/224501/297718266-18d7de7a-6bb4-41bc-86af-8c2226f1d463.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ0MzU3MjcsIm5iZiI6MTc3NDQzNTQyNywicGF0aCI6Ii8yMjQ1MDEvMjk3NzE4MjY2LTE4ZDdkZTdhLTZiYjQtNDFiYy04NmFmLThjMjIyNmYxZDQ2My5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyNVQxMDQzNDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05ZjY1ZjcwNjkzMGZkMWNkMWIzNTY0YzE3YzMwMGZhMDk3MTQwMGU3M2NiMjgyN2IxZDVjYTRjZGM2MmJkZDdmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.UgPSaXOe4Sxmx-h8w5Ylf7skCBzBqKGfae0y79O1pf4)](https://private-user-images.githubusercontent.com/224501/297718266-18d7de7a-6bb4-41bc-86af-8c2226f1d463.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ0MzU3MjcsIm5iZiI6MTc3NDQzNTQyNywicGF0aCI6Ii8yMjQ1MDEvMjk3NzE4MjY2LTE4ZDdkZTdhLTZiYjQtNDFiYy04NmFmLThjMjIyNmYxZDQ2My5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyNVQxMDQzNDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05ZjY1ZjcwNjkzMGZkMWNkMWIzNTY0YzE3YzMwMGZhMDk3MTQwMGU3M2NiMjgyN2IxZDVjYTRjZGM2MmJkZDdmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.UgPSaXOe4Sxmx-h8w5Ylf7skCBzBqKGfae0y79O1pf4)

Field settings: [![CleanShot 2024-01-18 at 12 05 57@2x](https://private-user-images.githubusercontent.com/224501/297718609-02054189-e35d-4758-8138-b87a42deaf10.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ0MzU3MjcsIm5iZiI6MTc3NDQzNTQyNywicGF0aCI6Ii8yMjQ1MDEvMjk3NzE4NjA5LTAyMDU0MTg5LWUzNWQtNDc1OC04MTM4LWI4N2E0MmRlYWYxMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyNVQxMDQzNDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xZGExMzdjNDc0MTJkMDgxODBkYTNlMmM5MjNlMzBiYjNiM2FhODY1YzVkNzIyYjk0ZmU5ZmI0OWNhMDRjZjJkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.-PHYmf8_aBtp7EkyY7dQioudiyLqpmQYGRjoXF-tzlk)](https://private-user-images.githubusercontent.com/224501/297718609-02054189-e35d-4758-8138-b87a42deaf10.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ0MzU3MjcsIm5iZiI6MTc3NDQzNTQyNywicGF0aCI6Ii8yMjQ1MDEvMjk3NzE4NjA5LTAyMDU0MTg5LWUzNWQtNDc1OC04MTM4LWI4N2E0MmRlYWYxMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyNVQxMDQzNDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xZGExMzdjNDc0MTJkMDgxODBkYTNlMmM5MjNlMzBiYjNiM2FhODY1YzVkNzIyYjk0ZmU5ZmI0OWNhMDRjZjJkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.-PHYmf8_aBtp7EkyY7dQioudiyLqpmQYGRjoXF-tzlk)

How to Install
--------------

[](#how-to-install)

Add this addon by running the following command in your terminal:

```
composer require pixelpillow/statamic-tailwind-color-field
```

How to Use
----------

[](#how-to-use)

### Field Configuration

[](#field-configuration)

You can add the fieldtype to your blueprints like you would any other fieldtype that is already part of Statamic. For configuration, you simply add the Tailwind color fieldtype to your blueprint's fieldset. The fieldtype has the following configuration options:

- **Tailwind Colors: (required)**: A list of all the colors you want to use in your blueprint. You can add as many as you want. The fieldtype will automatically add a color picker for each color you add here. Use the key for the color name and the value for the hex code. Eg. for "bg-orange-500" you use "orange" => "#ff0000"
- **Default Value**: Set a default value for the field eg. "orange"

... and that's it! You can now use the fieldtype in your blueprints.

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance29

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

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

Unknown

Total

1

Last Release

845d ago

### Community

Maintainers

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

---

Top Contributors

[![tdwesten](https://avatars.githubusercontent.com/u/224501?v=4)](https://github.com/tdwesten "tdwesten (5 commits)")

### Embed Badge

![Health badge](/badges/pixelpillow-statamic-tailwind-color-field/health.svg)

```
[![Health](https://phpackages.com/badges/pixelpillow-statamic-tailwind-color-field/health.svg)](https://phpackages.com/packages/pixelpillow-statamic-tailwind-color-field)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)