laraveltailwind-csslaravel-12

Why does my tailwindcss styled select look different to the example HyperUI element?

I'm trying to use the Base (Dark) select element from HyperUI.

https://www.hyperui.dev/components/application/selects

Of note is the height of the element, and the styling of the handle.

enter image description here

However, when I take the code:

<div>
  <label for="Headline">
    <span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Headliner </span>

    <select
      name="Headline"
      id="Headline"
      class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
    >
      <option value="">Please select</option>
      <option value="JM">John Mayer</option>
      <option value="SRV">Stevie Ray Vaughn</option>
      <option value="JH">Jimi Hendrix</option>
      <option value="BBK">B.B King</option>
      <option value="AK">Albert King</option>
      <option value="BG">Buddy Guy</option>
      <option value="EC">Eric Clapton</option>
    </select>
  </label>
</div>

And use it in my Laravel 12 project, the height and styling of the select's handle aren't the same:

enter image description here

The full code of the element from the browser dev tools:

<div>        
  <label for="AmountColumn">
    Amount Column
    <select name="AmountColumn" id="AmountColumn" class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white" wire:model.live="amountColumn" wire:click="update_table">
        <option value="">Please select</option>
        <option value="0">Zero</option>
    </select>
  </label>
</div>

My page is definitely loading tailwindcss, a slightly more recent minor version than what HyperUI's example iframe is using.

What am I missing to achieve the same result as the example?

Solution

  • You will need to import the tailwind form plugin.

    1. Install @tailwindcss/forms with npm: npm install -D @tailwindcss/forms
    2. Import the plugin in your resources/css/app.css with the following:
    @import 'tailwindcss';
@plugin '@tailwindcss/forms'; /* Add this */

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

    And then the select dropdown should be rendering properly.

    rendered hyperui