tailwind form not positioning properly as fixed element-CodePudding

I'm using tailwind css to style a little angular app, the problem is: i want my form to have a fixed position at the bottom of the page but it seems that classes like "top-100 left-50" are not working

home-component.html

<main >
<app-search ></app-search>
  <app-fruits-cards></app-fruits-cards>
</main>

searchbar-component.html:

<form *ngIf="searchForm" [formGroup]="searchForm" (ngSubmit)="onSubmit()" >
    <label for="searchInput">Search</label>
    <input formControlName="fruitName" type="text" id="searchInput" />
    <button type="submit" >search</button>
</form>

I actually tried to use the "top-100" class into the form element directly but it still doesn't work, what am I doing wrong here?

CodePudding user response：

Try adding position relative to the container

Also i'm not sure about top-100 ...

check here what values are allowed with the classes of top ..

https://tailwindcss.com/docs/top-right-bottom-left

CodePudding user response：

There is no default defined class top-100 the most near to it is top-96 but you can define your default in tailwind.config file or use custom value like top-[100px]

Read about: Adding arbitrary values here: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

Defining classes in the config file here: https://tailwindcss.com/docs/configuration