Apply tailwindss styles to ember-power-select

@belgoros wrote:

As the docs of ember-power-select say:

This component does not provide any option to customize its visual appearance

Has anybody ever managed to style it with Tailwindcss? The only thing I’d like to apply is the size/width of the select element so that it was expanded to its longest item as follows:

<div class="px-1 py-2">    
    <select
      class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 md:m-4 py-1 px-2 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
      <option>New Mexico</option>
      <option>Missouri</option>
      <option>Texas</option>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit</option>
    </select>
  </div>

what give the following result:

Image may be NSFW.
Clik here to view.

26936×100 2.8 KB

Unfortunately, passing class option to the PowerSelect does nothing:

<PowerSelect
      class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 md:m-4 py-1 px-2 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
      @selected={{destination}}
      @options={{cities}}
      @onChange={{action (mut destination)}}
    as |name|>
      {{name}}
</PowerSelect>

and the select element has the width of the selected item:

Image may be NSFW.
Clik here to view.

and not the longest one.

Any idea on how to fix that?

Posts: 2

Participants: 2

Read full topic