Sentry Answers>Next.js>

Tailwind CSS checkbox styles are not working

Tailwind CSS checkbox styles are not working

Matthew C.

—

The ProblemJump To Solution

You are using Tailwind CSS in your Next.js app. When you try to style a checkbox input, some Tailwind utility classes don’t work. For example, consider the following checkbox HTML input element:

Click to Copy
<div class="p-6">
  <input type="checkbox" className="h-16 w-16 cursor-pointer rounded-full text-green-600" />
</div>

The utility classes h-16, w-16, and cursor-pointer work but the utility classes rounded-full and text-green-600 do not. You can see this in the following Tailwind Play playground code demo.

The Solution

To fix this issue, add the @tailwindcss/forms plugin to your tailwind.config.js configuration file:

Click to Copy
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [require('@tailwindcss/forms')],
}

This plugin does a basic reset of the CSS styles of form elements. It removes the default styling applied to form elements by different browsers. Some of these styles are important for accessibility such as applying an outline to input elements when they are in focus.

The plugin adds some basic default styling to the different form elements including styles that are important for accessibility. These default styles are easy to override with Tailwind utility classes.

Removing the default form element styles and then giving them basic default styles makes the styling consistent across different browsers and serves as a good starting point for styling the form elements.

The rounded-full and text-green-600 styles don’t work without the style reset because the default styles applied by the browser, such as Chrome’s default HTML stylesheet, have a higher CSS specificity than the Tailwind utility classes.

  • Community SeriesDebug Next.js with Sentry
  • ResourcesJavaScript Frontend Error Monitoring 101
  • ResourcesSentry vs. Crashlytics: The Mobile Developer's Decision-Making Guide
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty Treats for Web Developers brought to you by Sentry. Web development tips and tricks hosted by Wes Bos and Scott Tolinski

    Listen to Syntax

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.