Forms

Automatically included in the all.css. This stylesheet provides theme styling to forms when paired with the Tailwind Forms plugin.

import '@brainandbones/skeleton/styles/forms.css';

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

Preview Elements →

Install Forms Plugin

View Tailwind's official YouTube video tutorial or follow the written steps.

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>