Getting Started With Tailwind CSS Custom Forms Plugin

Published on by

Getting Started With Tailwind CSS Custom Forms Plugin image

Tailwind CSS is a really great utility CSS framework. Form inputs are one of the harder parts of a web app to style using utility classes. By default, Tailwind resets any browser-specific styling, but the inputs are pretty ugly. Making inputs look really great usually means writing custom CSS including pseudo-selectors like ::after and even custom SVGs inside your CSS.

Tailwind CSS Custom Forms is a plugin built to provide better default styling for form inputs and make it easier to customize them inside a project using Tailwind. The styling the plugin provides is compatible with all browsers down to IE11 and completely accessible due to really nice focus states.

In this tutorial, I’ll show you how to install the plugin and get started using it. It’s really easy to install and configure, so let’s get started!

Installation

To install the plugin, run npm install @tailwindcss/custom-forms --save-dev inside your project. After that, you need to require() the plugin inside your Tailwind config file.

// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@tailwindcss/custom-forms'),
]
}

Lastly, re-compile your CSS to pick up the changes made by the plugin.

Using the plugin’s classes

The plugin provides really simple classes that you can use on each type of input. Some of the classes included are form-input, form-textarea, form-select, form-multiselect, form-checkbox, and form-radio. Add one of these to the respective input type, and instantly you’ll have better styling than the browser defaults.

To customize the background colors on checkbox and radio inputs, add a regular Tailwind text-{color} class to the input specifying the color you’d like to be applied.

You can also customize the size of checkbox and radio inputs by adding h-{height} and w-{width} classes directly on the inputs. They use h-4 w-4 by default, but if you want your input to be slightly larger, try h-5 w-5.

Customizing the default values

Just like Tailwind, the Custom Forms plugin provides a really nice way to customize the defaults. Add a theme.customForms key to your Tailwind config file you can customize specific properties on each input type using a CSS-in-JS syntax:

// tailwind.config.js
module.exports = {
theme: {
customForms: theme => ({
default: {
input: {
borderRadius: theme('borderRadius.lg'),
backgroundColor: theme('colors.gray.200'),
'&:focus': {
backgroundColor: theme('colors.white'),
}
},
select: {
borderRadius: theme('borderRadius.lg'),
boxShadow: theme('boxShadow.default'),
},
checkbox: {
width: theme('spacing.6'),
height: theme('spacing.6'),
},
},
})
},
}

To read more about using and customizing the plugin, read the plugin’s documentation.

Conclusion

The Tailwind Custom Forms plugin provides a way for you to quickly get started styling your form inputs. Whether you use the plugin to prototype a page or use it in production, I think it’s a great choice.

Check out the plugin’s demo page, documentation, and source code for more information.

Jason Beggs photo

TALL stack (Tailwind CSS, Alpine.js, Laravel, and Livewire) consultant and owner of roasted.dev.

Filed in:
Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Visit Paragraph
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
LoadForge logo

LoadForge

Easy, affordable load testing and stress tests for websites, APIs and databases.

LoadForge
Paragraph logo

Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Paragraph
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
Bacancy - Staff Augmentation logo

Bacancy - Staff Augmentation

Leave your web app development hustles to the leading IT Staff Augmentation Service Providers. Choose from an extensive pool of 1050+ developers and give yourself the sigh of success you deserve with Bacancy. Get In Touch Today!

Bacancy - Staff Augmentation
DocuWriter.ai logo

DocuWriter.ai

Save hours of manually writing Code Documentation, Comments & DocBlocks, Test suites and Refactoring.

DocuWriter.ai
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
Add Architecture Tests to Saloon API Integrations with Lawman image

Add Architecture Tests to Saloon API Integrations with Lawman

Read article
Protect Routes with JWT Tokens Using This Package for Laravel image

Protect Routes with JWT Tokens Using This Package for Laravel

Read article
Increment a Rate Limiter by a Custom Amount in Laravel 10.46 image

Increment a Rate Limiter by a Custom Amount in Laravel 10.46

Read article
Add Kanban Boards to Your Laravel App in Seconds image

Add Kanban Boards to Your Laravel App in Seconds

Read article
October CMS v3.6 Ships Today, Full of New Features image

October CMS v3.6 Ships Today, Full of New Features

Read article
Laracon EU Videos are now out image

Laracon EU Videos are now out

Read article