In the last issue, we applied Tailwind.css to make the page a little easier to read, and this time we will show you how to use it in the Preview Search widget as well.
Widget Changes
The widget that was already set up used a widget that had a style sheet set up. This time, we will set up a widget that has no style sheet applied to it regarding the previous widget.
First, delete the widget you have already created: src\widgets\PreviewSearch Then create a new widget with the same name as before, but with the last selection No styles. Now you have switched to using the widget with no stylesheet applied.
It has collapsed spectacularly. We will correct this by applying a style sheet.
Input box adjustment
The size of the box for entering search keywords is small because the size is not specified. Therefore, specify the following in className for NavMenu.InputTrigger.
TypeScript
<NavMenu.InputTrigger
onChange={keyphraseHandler}
autoComplete="off"
placeholder="Type to search..."
className="w-full border-1 border-gray-500 h-8"
/>As a result, the width could be adjusted.
However, the result displayed is not correct. Therefore, set the following value for className in NavMenu.SubContent.
TypeScript
<NavMenu.SubContent
orientation="vertical"
value="defaultArticlesResults"
ref={widgetRef}
className="absolute top-4 left-0"
>Search results are now displayed as follows
The items that were displayed at the top are now displayed just below the input boxes.
Display results side by side
Originally, a total of six results were to be displayed, three side by side. We will now apply the style to the displayed area, specifying the following className for NavMenu.List.
TypeScript
<NavMenu.List className="grid grid-cols-3">
There are three side-by-side, but all results are lined up without gaps. Set a little margin for each.
TypeScript
<NavMenu.Item key={article.id} className="mr-1 ml-1 mt-2">
Adjustment of the appearance of the search results is now complete. The procedure is to specify the className for each as shown above, so that the style can be adjusted to match the element.
Summary
This time, we adjusted the style by applying the Tailwind.css style sheet, which is not provided as standard, but we think these tips will be equally useful when you want to match the site you are actually operating.