Forms Plugin
@tailwindcss/forms is a 1:1 PHP port of the official forms plugin. It provides an opinionated reset for form controls — text inputs, textareas, selects, checkboxes, and radios — bringing them to a consistent baseline (appearance reset, border, padding, focus ring, custom select chevron and checkbox/radio icons) that you can then override with utilities.
Usage
Load the plugin with @plugin and import the utilities layer:
use TailwindPHP\tw;
$css = tw::generate(
'<input class="form-input"><select class="form-select"></select>',
'@plugin "@tailwindcss/forms"; @import "tailwindcss/utilities.css";'
);Strategy
The strategy option controls how styles are applied:
| Strategy | Behavior |
|---|---|
base | Styles native form elements globally via selectors like [type='text'], textarea, and select. |
class | Styles only the explicit form-* classes, leaving unclassed elements untouched. |
When strategy is omitted, both strategies are applied — native elements get the baseline reset and the form-* classes are available too. Set a single strategy to opt out of the other:
@plugin "@tailwindcss/forms" {
strategy: "class";
}Class strategy
With the class strategy (or the default), apply these classes explicitly to the elements you want to style:
| Class | Element |
|---|---|
form-input | Text-like inputs |
form-textarea | <textarea> |
form-select | <select> |
form-multiselect | <select multiple> |
form-checkbox | <input type="checkbox"> |
form-radio | <input type="radio"> |
$css = tw::generate(
'
<input class="form-input">
<textarea class="form-textarea"></textarea>
<select class="form-select"></select>
<select class="form-multiselect" multiple></select>
<input type="checkbox" class="form-checkbox">
<input type="radio" class="form-radio">
',
'
@plugin "@tailwindcss/forms" {
strategy: "class";
}
@import "tailwindcss/utilities.css";
'
);Each class resets the control's appearance and sets borders, padding, and a focus ring; form-select adds a chevron background image, and form-checkbox/form-radio add checked-state icons. Override any of it with regular utilities (for example class="form-input rounded-lg border-gray-300").
See Plugins for the @plugin directive and loading details.
Typography Plugin
The @tailwindcss/typography port adds the prose classes — typographic defaults for rendered HTML — with size, color, and invert modifiers.
Custom Plugins
Write your own plugin by implementing PluginInterface and using the PluginAPI to register utilities, components, and variants, then load it with @plugin.