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

/components/application/selects

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

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:

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?

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.

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:

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?

• laravel
• tailwind-css
• laravel-12

• play.tailwindcss/WbwkQICTv4?file=css – rozsazoltan Commented Mar 28 at 5:34

2 Answers 2

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.

Although tatachiblob provided the correct answer, it contained a lot of misleading information. Therefore, I feel the need to post another response that focuses solely on the question.

TailwindCSS does not include form styling by default; this is provided by a separate @tailwindcss/forms plugin, which can be added to your code as follows:

• tailwindlabs/tailwindcss-forms - GitHub
• @plugin directive - TailwindCSS v4 Docs

npm install @tailwindcss/forms

./resources/css/app.css

@import "tailwindcss";
@plugin "@tailwindcss/forms";  /* added forms plugin */

• TailwindCSS v4 Playground