Require
x-nui
as a plugin inside the
tailwind.config.js
file:
import nuiUI from "xnui-ui/tailwindcss";
export default {
theme: {
extend: {},
},
plugins: [nuiUI()],
};If you are using tailwindcss we recommend that you install this plugin to add extra utilities such as:
| name | description |
|---|---|
| nui-selected | Indicates that the current item is selected. |
| nui-group-selected | Indicates that the parent of the element is selected. |
| nui-show | Indicates that the current item is show. |
| nui-group-show | Indicates that the parent of the element is show. |
| nui-open | Indicates that the current item is open. |
| nui-group-open | Indicates that the parent of the element is open. |
<div x-menu>
<button x-menu:toggle class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
Dropdown button
<svg class="w-2.5 h-2.5 ms-3 nui-group-open:rotate-90" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
</svg>
</button>
<div x-menu:items>
<ul>
<li>Account settings</li>
<li>Documentation</li>
<li>Invite a friend</li>
</ul>
</div>
</div>