June 3, 2022
Tailwind CSS has this great package called @tailwindcss/forms
that pre-styles form inputs for you.
But what if you want to add that package to an existing project, without globally affecting the existing form inputs?
First, install the plugin:
npm install @tailwindcss/forms
Now, register the plugin in the plugins
array in your tailwind.config.js
file, specifying a strategy
of class
:
// tailwind.config.js
plugins: [
require("@tailwindcss/forms")({
strategy: "class"
})
]
Setting strategy: "class"
means that inputs won’t be globally styled by default. Instead, you’ll be able to slowly opt in to new inputs that you want to be styled by the Forms plugin.
You can opt in by adding a specific class to new form inputs in your app. For most inputs it’s form-input
, but there’s also form-checkbox
, form-select
, etc. The full list of classes to reference is here.
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects I’m working on!