Question 45181 in Html Question posted in
Some basic documentation can be found here.

Tailwind CSS checkbox styles are not working – Html

I have a checkbox in my Next.js project and after adding some Tailwind utility classes nothing takes effect except changes to width, height and cursor. Color, bg, border, etc. don’t work.

        <div className="flex py-4 m-auto w-2/3 justify-between items-start">
          <div className="w-1/7">
            <div className="border-b pb-4">
              <h1 className="mb-2 font-medium">Filter 1</h1>
              <label htmlFor="c1">
                <div className="flex group active:ring-2 ring-black rounded">
                  <input
                    id="c1"
                    type="checkbox"
                    className="rounded-full h-8 w-8 cursor-pointer bg-red-100 border-red-300 text-red-600 focus:ring-red-200"
                  />
                  <p className="pl-2 text-reg cursor-pointer group-hover:underline decoration-solid">
                    Subfilter 1
                  </p>
                </div>
              </label>
            </div>
          </div>
        </div>

cursor-pointer, h-8 and w-8 are the only utility classes that are working in the checkbox. color still defaults to blue, there’s no ring appearing on focus, and bg still white.

Others elements in the example code like p, div and h1 are working perfectly.

Tags:

2

Answers


  1. 0

    Add tailwindcss/forms to your config file:

    module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

    You can read more about it in the docs and the GitHub repository.

    Here is a working example in Tailwind Play.

    Login or Signup to reply.
  2. 0

    The key here is appearance CSS property – set it to none to kinda reset default browser styling

    The appearance CSS property is used to control native appearance of UI controls, that are based on operating system’s theme

    In Tailwind it is appearance-none utility

    Use appearance-none to reset any browser specific styling on an element.

    <input
  type="checkbox"
  class="appearance-none ..."
/>

    DEMO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search