December 30, 2021
To style a checkbox, first install the @tailwindcss/forms
plugin, which makes it much easier to style form elements with Tailwind CSS.
To install the plugin, run this command in your terminal:
npm install @tailwindcss/forms
Then, add the plugin to your Tailwind config file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
// ...
},
},
plugins: [require("@tailwindcss/forms")],
};
Now, your HTML checkboxes will look a lot better by default.
You can style the colors of your checkbox using Tailwind classes:
<input
type="checkbox"
class="bg-red-100 border-red-300 text-red-500 focus:ring-red-200"
/>
For example, this gives the checkbox a light red background with a darker red border. The text-red-500
utility makes the checked checkbox a darker red, and when the checkbox is focused, there’ll be a light red ring around it.
The ring helps users who are navigating the page via the keyboard to know when this checkbox is the active element, so they can hit the space bar to check/uncheck it. However, you can remove the default ring:
<input type="checkbox" class="focus:ring-0" />
You can also use normal Tailwind utility classes to make the checkbox a different size, more or less rounded, or anything else:
<input type="checkbox" class="h-8 w-8 rounded-full shadow" />
You can also style a checkbox differently when it’s checked, using the checked:
variant:
<input type="checkbox" class="shadow checked:shadow-xl" />
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!