In my solid-js work, I wanted to add a floating button to the far right of the screen in my application. After coming across an intriguing article about creating floating elements in Tailwindcss..., I decided to try it out by writing the following code:
export default function SearchEngine() {
return (
<>
...
<BsChatLeftTextFill size={41} class="float-right text-blue-500 "/>
</>
);
}
While this successfully placed the button on the far right of my app, I noticed that its position was affected by scrolling the page. In my view, as a floating button, it should remain fixed at the far right regardless of scrolling, maintaining its original position. This issue led me to consult the Tailwindcss documentation, which confirmed that the property I had used was correct.