Forms

Tailwind

Provides theme styling to forms when paired with the Tailwind forms plugin.

@skeletonlabs/skeleton
View Source
Doc Source
Tailwind Forms Plugin

Examples

We've provided a "kitchen sink" page to preview form elements.

Preview Elements →

Usage

Tailwind Forms Plugin

Follow the steps below to instlal this plugin. If you would like to learn more about this plugin, see Tailwind's YouTube tutorial.

console 
npm install -D @tailwindcss/forms

Add the plugin to your tailwind.config.cjs

javascript 
module.exports = {
	// ...
	plugins: [
		// Insert before the Skeleton Tailwind plugin:
		require('@tailwindcss/forms'),
		// ...
	],
}

Usage

Create form elements using native HTML markup. We recommend span tags for label text.

html 
<label for="name">
	<span>Name</span>
	<input type="text" id="name" bind:value={name} minlength="2" required>
</label>
html 
<label for="color">
	<span>Color</span>
	<select name="color" id="color" bind:value={color}>
		<option value="red">red</option>
		<option value="green">green</option>
		<option value="blue">blue</option>
	</select>
</label>