Building a search modal dialog with HeadlessUI and TailwindCSS
Styling the search form
Search modal button02:22
Button label based on the operating system01:22
Styling the modal dialog02:29
Open the modal using a keyboard shortcut02:17
Modal dialog transitions03:30
Styling the search form03:15
Show and style the search results06:42
Navigate list items using arrow keys08:42
Styling the search form
[00:00] Let's move on to the search form. The form will contain three elements: one div to hold the svg search icon; which I'll paste in, a search input with placeholder search, and another div to hold an escape button that when pressed will close the modal.
[00:21] Let's open the modal, and here they are. Now, the svg icon will have
w-5 h-5 and
text-gray-700, the form itself will be a flex, and to center the items we'll use
items-center. Next up, we want to position the icon over the form input, so the container will be
left-0 to push it to the left, and then to center the icon we can use
flex items-center. Finally let's add in some left padding using
pl-4 and set
pointer-events-none to let the user focus the input when clicking directly on the icon.
[01:08] Moving on to the input, we'll do
py-4 for vertical padding, and
pl-12 to add enough left padding for the text to be visible.
border-b border-gray-100 outline-none and then
placeholder-gray-400 to style the placeholder.
[01:28] For the button container, we'll do
right-0 to push the element to the right,
flex item-center to center the button, and then add some right padding. Then for the button itself, we'll do
flex item-center to align the content,
p-1.5 for padding,
tracking-wider to make the text more legible,
rounded-md to make it rounded,
border border-grade-200 and then on focus we'll do
[02:12] Now, the button label is too big. We'll need to create a new utility class called
text-xxs to add a new font size. Open your
tailwind.config.js file, go under theme, extend, add the
fontSize key, then the name of the font size; which is whatever we have after
text-, in our case we have
xxs. This will be an array where the first element is the font size; let's set it to
.65rem, and we can use a second object argument to set the
line-height; let's say
1.1rem. Let's save, and here it is; our label is way smaller.
[02:58] Now, if you remember our modal was supposed to be rounded. However, because we have some absolute elements in place, we also need to set
overflow-hidden here, on the modal container. Save, and we're done styling the modal.