tailwindlabs/tailwindcss-custom-forms

focus:outline-none not working

cosbgn opened this issue · 2 comments

cosbgn commented

Is it possible to disable focus on the checkbox somehow? I tried adding the class focus:outline-none but doesn't seem to work. Thanks!

adamwathan commented

The focus ring you see is a box shadow by default with this plugin. There are two ways to disable it:

  1. Add the focus:shadow-none utility
  2. Configure the plugin to use your own focus styles (scroll to "Customizing the default styles" in the docs: https://tailwindcss-custom-forms.netlify.com/)

Option 2 is probably the right one if you want to do this for the whole site.

elitan commented

To the next person, this is how I did @adamwathan's option 2 to disable all focus classes for checkboxes:

In the tailwind.config.js file:

  theme: {
    customForms: (theme) => ({
      default: {
        checkbox: {
          "&:focus": {
            outline: "none",
            boxShadow: "none",
            borderColor: "none",
          },
        },
      },
    }),
    extend: {},
  },

Also this might be helpful:

https://github.com/tailwindlabs/tailwindcss-custom-forms/blob/master/src/defaultOptions.js

  • 👍4