Tailwind select element not displaying correctly

Question

There seems to be a problem with any select elements that I create in my project, on desktop everything renders fine, as soon as I open the google chrome inspector and click on the select box to render the options, they appear like this:

The options dropdown appears in a different position than where it should be, the options text is barely visible.

The above image was taken in isolation mode on google chrome.

Anywhere I add a simple select box as HTML in my project it renders like this when I click on it.

My configuration is:

next.js - 12.1.0v
React - 18
Tailwindcss v3
default tailwind config (only added tailwind elements)

Select box code:


<select value={ selectedValue } data-e2e={ attributeName } onChange={ (event) => onChangeAttribute(event) } className="p-[9px] shadow placeholder:text-textgrey rounded border border-midgrey w-5/6">
          {
           attributeValues.map((attribute, index) => {
            return (<option
              className="font-roboto"
              key={ `${attribute.label}-${index}` }
              value={ attribute.value }
              data-e2e={ attribute.value }
            >
              { attribute.lable }
             </option>);
          })}
        </select>

It doesn't really matter what select classes I use, I added a dummy select HTML element on the same page and it was rendering the same (broken).

<select>
 <option value="1">1</option>
 <option value="2">2</option>
</select>

Has anyone run into the same problem?

Can you include the code that contains your dropdown and specify which OS/browser you are using? — Ed Lucas, Jun 14 '22 at 19:20
@EdLucas sure, I'll add it in a second, I was testing it on Google Chrome (latest version) - Mac OS. — Nicolae Maties, Jun 15 '22 at 08:46
@EdLucas it doesn't really matter how the select looks like, it can be a dummy one without any classes, but it still renders the same. — Nicolae Maties, Jun 15 '22 at 08:51
I have the same problem. The same bug is visible on the showcase-site of tailwind. — 71m024, Aug 13 '23 at 18:46

score 0 · Answer 1 · answered Jun 21 '22 at 08:54

Try the following code which works just fine:

 <div className="flex justify-center">
      <div className="mb-3 xl:w-96">
        <select
          className="form-select appearance-none
      block
      w-full
      px-3
      py-1.5
      text-base
      font-normal
      text-gray-700
      bg-white bg-clip-padding bg-no-repeat
      border border-solid border-gray-300
      rounded
      transition
      ease-in-out
      m-0
      focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
          aria-label="Default select example"
        >
          <option selected>Open this select menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
    </div>

Output:

Works just fine for you, the setup is the one that matters, not the code... — Nicolae Maties, Jun 22 '22 at 08:33
Please follow the link : https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/ . It will definitely work. For me after setting up this way , I got the above output . Hope it helps! — krishnaacharyaa, Jun 22 '22 at 11:05

Tailwind select element not displaying correctly

1 Answers1