Um exemplo de controle de tamanho da <div> no Tailwinds

[Frank K Hosaka]

O código a seguir consegui com o Copilot. Eu não consegui deixar azul o <div> que contém a palavra balancete.

O Copilot me aconselhou a limpar o histórico do navegador, consegui definir a cor do fundo mas não consegui centralizar a palavra balancete no <div>.

O Copilot acredita que existe um erro estrutural no código. Eu suponho que defini o <div> principal como 550px, mas a soma das outras colunas dá bem mais do que isso, e assim o Tailwinds não consegue executar o serviço como esperado. Mas a verdade é que eu nem sei o que é a estrutura de um CSS.

O mais bacana mesmo é como o Copilot define o tamanho de cada <div> usando o recurso do CSS dentro do marcador <style>, pela primeira vez em cinco anos, consigo definir um tamanho para a primeira coluna e um tamanho para outras quatro.

 

*** depois que publiquei essa mensagem é que eu vi um grave erro de digitação, escrevi "continer", quando o correto é "container". Será esse o famoso erro estrutural que o Copilot comentou? ***

balanceteView.php
<?php include('menuView.php'); ?>
<style> .grid-container {display:grid;grid-template-columns:260px repeat(4,140px)}</style>
<div class="bg-gray-100 flex items-center justify-center w-[550px] mx-auto">
<div class="continer mx-auto">
<div class="grid-container bg-blue-700 text-center text-white">Balancete</div>
	<div class="grid-container bg-gray-800 text-white">
        <div class="py-0 text-center">Conta</div>
        <div class="py-0 text-center">Início</div>
		<div class="py-0 text-center">Débito</div>
		<div class="py-0 text-center">Crédito</div>
		<div class="py-0 text-center">Saldo</div>
	</div>
    <?php foreach($jMatriz as $conta): ?>
	<div class="grid-container bg-white">
        <div class="border px-4 py-0"><?=$conta->conta?> <?=$conta->descricao?></div>
        <div class="border px-4 py-0 text-right"><?=dec($conta->inicio)?></div>
		<div class="border px-4 py-0 text-right"><?=dec($conta->debito)?></div>
		<div class="border px-4 py-0 text-center">crédito</div>
		<div class="border px-4 py-0 text-center">saldo</div>
	</div>
	<?php endforeach; 
		$paginaAnterior=$paginaAtual-1;
		$paginaAtual++; ?>
	</table>
	<div class=py-2></div>
	<a href=?Balancete.inicio.<?=$paginaAnterior?>
		class="bg-blue-500 hover:bg-blue-700 text-white 
		font-bold py-1 px-2 rounded">Anterior</a>
	<a href=?Balancete.inicio.<?=$paginaAtual?>
		class="bg-blue-500 hover:bg-blue-700 text-white 
		font-bold py-1 px-2 rounded">Próximo</a>
</div>
</div>
</div>

 

 

Editado Outubro 5 por Frank K Hosaka