Apply tailwindss styles to ember-power-select

[belgoros]

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:

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:

and not the longest one.

Any idea on how to fix that?

[ef4]

From ember-power-select’s API reference:

The component by default is tagless, so [class] won’t take any effect unless the user specifies tagName=div too.

Also, you can pass @triggerClassor @dropdownClass which might be what you really wanted to target anyway.

[belgoros]

Hi @ef4, thank you for your response. The first question is - where should I specify tagName=div, - I don’t have any component, just a controller, router and a template (all of application*) .

Then I tried to specify @triggerClass as follows in the application template:

<PowerSelect
      @triggerClass="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>

what generated the following HTML for ember-power-select without really modifying its width:

<div class="ember-view ember-basic-dropdown-trigger  ember-power-select-trigger 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" role="button" tabindex="0" data-ebd-id="ember190-trigger" aria-owns="ember-basic-dropdown-content-ember190">

As you could see, there some ember-power-select proper styles which, I think override the ones of tailwind. Even if some of them have been applied.

Here is how looks a classic select element styled with tailwind:

And here is how looks the ember-power-select with the same styles applied to @triggerClass:

Applying the same css using @dropdownClass in ember-power-select options changed less and generated the following HTML, - as you see, no tailwind styles have been applied at all:

<div class="ember-view ember-basic-dropdown-trigger  ember-power-select-trigger" role="button" tabindex="0" data-ebd-id="ember190-trigger" aria-owns="ember-basic-dropdown-content-ember190">

I also tried to apply the styles as follows:

<PowerSelect
      @tagName="div"
      @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>

what changed the select as follows:

and generated the following HTML:

<div id="ember190" 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 ember-view">    
    <div class="ember-view ember-basic-dropdown-trigger  ember-power-select-trigger" role="button" tabindex="0" data-ebd-id="ember191-trigger" aria-owns="ember-basic-dropdown-content-ember191">
    
          <span class="ember-power-select-selected-item">
        
      Missouri
    ...

By the way, setting theme to false in ember-cli-build.js:

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-power-select': {
      theme: false
    },
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss')
        ]
      }
    }
});

removed some styles and visually the generated select element looks the same, except its width:

I think that the main difference is that ember-power generates 2 divs compared to select element I’m using on a classic page.

What am I missing here?

[ef4]

It would be <PowerSelect @tagName="div" ....

Setting theme to false is a good idea, that is also probably necessary.

[belgoros]

@ef4

@tagName=“div”

I even created a separate component ember-power-select and extended from ember-power-select/components/power-select as follows:

# components/ember-power-select.js

import EmberPowerSelect from 'ember-power-select/components/power-select';

export default EmberPowerSelect.extend({
  tagName: 'div',
  classNames: [
    'appearance-none',
    'w-full',
    'px-2',
    'md:w-auto',
    'bg-gray-200',
    'border',
    'border-gray-200',
    'text-gray-700',
    'md:py-1',
    'md:my-6',
    'md:mx-1',
    'rounded',
    'leading-tight',
    'focus:outline-none',
    'focus:bg-white focus:border-gray-500'
   ]
});

without changing the PowerSelect call in the application template. It seems like declaring classNames had no effects.

So I removed completely the custom component and left EPS (ember-power-select) declared as follows in the template:

<div class="px-1 py-1">
    <PowerSelect
      @tagName="div"
      @class="appearance-none w-full px-2 md:w-auto bg-gray-200 border border-gray-200 text-gray-700 md:py-1 md:my-6 md:mx-1 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>
</div>

Now it does looks like the select element styled in a HTML page but DOES not apply automatic width and is not stretched to the longest item.

Ember version:

HTML version

[belgoros]

For those who are interested, I pushed the example app to GitHub repo.

The problem was first in the declaration level for CSS to apply to the EPS element, - I moved them to the outer div. Then I removed the previously set the theme to false in ember-cli-build.js.

Now it is responsive, yay .

@ef4 : Thank you for your initial guide lines !