Search code examples
reactjstailwind-cssflowbite

Why do all input feilds now have a blue outline after installing flowbite?

I recently installed flowbite-react to my react app and now all input fields across my whole app have a blue outline when focused. Even when I apply styles to remove the outline, nothing seems to work.

Everything installed properly and I added the config and plugin to tailwindcss.

Is this an issue anyone has encountered?

Here is a screenshot of inspecting the element: enter image description here

I found this style when inspecting the element: --tw-ring-color is the issue enter image description here

I tried adding this to index.css it made the outline smaller but it is still there

* {
    --tw-ring-color: rgb(0 0 0 / 0) !important;
  }

Kyle Xyian Dilbeck solution below works for the Flowbite wrapper. If you want to add an inline style do this:

focus:border-transparent OR a color of your choice, the blue ring will be removed

the ring inline class still does not remove it.

Solution

  • You've done nothing wrong and it is working as expected!! When you install a UI lib like flowbite then their default styles are applied.

    Explanation

    The blue outline you're seeing is due to the default focus styles applied by Flowbite-React or Tailwind CSS. One way to remove this outline is by using the outline-none utility class provided by Tailwind CSS or more specifically changing the ring style. If you add ring-0 it should effectively remove it. You can also see this link for other colors and options for tailwind css ring color.

    Solutions

    Because flowbite uses tailwind css we will update the tailwind style. It is currently applying the style via 'ring color' which you can change in a few ways, here are two main examples(which are recommended by flowbite docs):

    Inline Example

    ex. 1: change to red

    <input className="ring-2 ring-blue-500 focus:ring-red-500" type="text" />

    ex. 2: remove it completely

    <input className="ring-0 focus:ring-transparent" type="text" />

    Above is the first option offered by flowbite react. Below is the second where you can create a custom theme - see documentation here.

    Theme Example:

    Remove ring color from all inputs in a component via flowbite theme wrapper

    import type { CustomFlowbiteTheme } from 'flowbite-react';
import { Flowbite } from 'flowbite-react';

const customTheme: CustomFlowbiteTheme = {
  input: {
    ringColor: 'ring-transparent focus:ring-transparent',
  },
};

export default function MyPage() {
  return (
    <Flowbite theme={{ theme: customTheme }}>
      <input className="ring-2 focus:ring-2" type="text" />
    </Flowbite>
  );
}

    PS:

    If it works then don't forget to mark your question as answered!

    Also if you liked my solution and think it shows good research, I'd appreciate the upvote!