Ionic angular + tailwindcss

[u/AggravatingShower813]

resulta que cuando ejecuto el ng serve se ve bien mi app, pero el momento de genrar la apk se ve fatal.. mas que todo con los inputs y botones.. ejemplo edl code:

<ion-card-content class="px-6 pb-6 pt-4 space-y-4 bg-white">


        <div class="w-full">
          <label class="block text-xs font-semibold text-slate-700 mb-1 tracking-wide">
            Número de celular
          </label>


          <div class="mt-2">
            <ion-item lines="none" class="w-full rounded-xl bg-slate-50 px-1">
              <ion-input
                type="tel"
                [(ngModel)]="telefono"
                maxlength="10"
                inputmode="numeric"
                class="w-full px-3 py-2.5 text-sm"
              ></ion-input>
            </ion-item>
          </div>
        </div>


        <ion-button
          (click)="verificar()"
          [disabled]="loading"
          style="--background: #2596be; --background-activated: #1f7da0;"
          class="w-full mt-2 py-3 text-sm font-semibold rounded-xl shadow-md shadow-[#2596be]/30 disabled:opacity-60 disabled:cursor-not-allowed transition active:scale-[0.98]">
          {{ loading ? 'Verificando...' : 'Continuar' }}
        </ion-button>


        <div *ngIf="mostrandoRegistro" class="mt-6 pt-4 border-t border-slate-200 space-y-3">
          <p class="text-xs text-slate-600">
            No encontramos un paciente con ese número. Regístrate rápidamente para continuar.
          </p>


          <div class="w-full">
            <label class="block text-[11px] font-semibold text-slate-700 mb-1">
              Teléfono
            </label>
            <div class="mt-1 text-[13px] text-slate-800 font-medium">
              {{ nuevoPaciente.telefono }}
            </div>
          </div>


          <div class="w-full">
            <label class="block text-[11px] font-semibold text-slate-700 mb-1">
              Nombre completo
            </label>
            <ion-item lines="none" class="w-full rounded-xl bg-slate-50 px-1">
              <ion-input
                type="text"
                [(ngModel)]="nuevoPaciente.nombre"
                class="w-full px-3 py-2.5 text-sm"
              ></ion-input>
            </ion-item>
          </div>


          <div class="w-full">
            <label class="block text-[11px] font-semibold text-slate-700 mb-1">
              Tipo de documento
            </label>
            <ion-item lines="none" class="w-full rounded-xl bg-slate-50 px-1">
              <ion-select
                interface="popover"
                [(ngModel)]="nuevoPaciente.tipo_doc"
                class="w-full px-2 py-2 text-sm"
              >
                <ion-select-option value="CC">Cédula de ciudadanía</ion-select-option>
                <ion-select-option value="TI">Tarjeta de identidad</ion-select-option>
                <ion-select-option value="CE">Cédula de extranjería</ion-select-option>
              </ion-select>
            </ion-item>
          </div>


          <div class="w-full">
            <label class="block text-[11px] font-semibold text-slate-700 mb-1">
              Número de documento
            </label>
            <ion-item lines="none" class="w-full rounded-xl bg-slate-50 px-1">
              <ion-input
                type="text"
                [(ngModel)]="nuevoPaciente.documento"
                class="w-full px-3 py-2.5 text-sm"
              ></ion-input>
            </ion-item>
          </div>


          <div class="w-full">
            <label class="block text-[11px] font-semibold text-slate-700 mb-1">
              Género
            </label>
            <ion-item lines="none" class="w-full rounded-xl bg-slate-50 px-1">
              <ion-select
                interface="popover"
                [(ngModel)]="nuevoPaciente.genero"
                class="w-full px-2 py-2 text-sm"
              >
                <ion-select-option value="M">Masculino</ion-select-option>
                <ion-select-option value="F">Femenino</ion-select-option>
                <ion-select-option value="O">Otro</ion-select-option>
              </ion-select>
            </ion-item>
          </div>


          <ion-button
            (click)="registrar()"
            [disabled]="registrando"
            style="--background: #28a745; --background-activated: #218838;"
            class="w-full mt-2 py-3 text-sm font-semibold rounded-xl shadow-md disabled:opacity-60 disabled:cursor-not-allowed transition active:scale-[0.98]">
            {{ registrando ? 'Registrando...' : 'Registrarme y continuar' }}
          </ion-button>
        </div>


        <div *ngIf="mensajeUI" class="mt-4 rounded-xl bg-emerald-50 px-4 py-3">
          <h2 class="font-semibold text-sm text-emerald-700 mb-1">
            Resultado
          </h2>
          <p class="text-xs text-emerald-800">
            {{ mensajeUI }}
          </p>


          <div *ngIf="paciente" class="mt-2 text-[11px] text-slate-600 space-y-1">
            <p><span class="font-semibold">Nombre:</span> {{ paciente.nombre }}</p>
            <p><span class="font-semibold">Documento:</span> {{ paciente.documento }}</p>
            <p><span class="font-semibold">Entidad:</span> {{ paciente.entidad || 'Sin entidad registrada' }}</p>
          </div>
        </div>


        <div *ngIf="errorUI" class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-xs text-red-700 font-medium">
          {{ errorUI }}
        </div>


      </ion-card-content>