Laravel: Bootstrap e Tailwinds ao mesmo tempo

[Frank K Hosaka]

Quando comecei a estudar o Laravel eu usei o Bootstrap.

Com o surgimento da inteligência artificial em 2024, ficou bem mais fácil usar o Tailwinds.

Hoje fiz uma experiência para saber se dava para usar os dois ao mesmo tempo, e deu certo:

arquivo testeView.blade.php
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])

<table class='m-0 m-auto'>
    <tr class=bg-secondary>
    <td>{{'limão'}}<td>
    <td><form class=m-0 style=height:10px>
            @csrf
            <input value=1 size=1 class="form-control text-end bg-transparent border-0"
                 style=height:10px>
        </form>
    <td>{{'x 1'}}
    <td>{{'='}}
    <td>{{1}}
</table>

<div class=h-1></div>

<div class="flex bg-secondary m-0 m-auto w-[160]"> 
    <div>{{'limão'}}</div> 
    <div>
        <form class="m-0 h-[10px]">
            @csrf
            <input value=1 size=1 class="text-right bg-transparent border-none h-[10px] mt-1"> 
        </form> 
    </div> 
    <div>{{'x 1'}}</div> 
    <div>{{'='}}</div> 
    <div>{{1}}</div> 
</div>

 

Editado Novembro 17 por Frank K Hosaka

[Frank K Hosaka]

Estou pensando em usar o Bootstrap e oTailwinds no PHP, mas logo no primeiro teste, encontrei um problema aqui:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
  rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
  @media (min-width: 768px) {  body {width: 750px; margin: auto} }
</style>
<div class="w-50 bg-success m-auto">Olá mundo</div>

Aqui usei o CSS convencional para centralizar a <div> no meio da tela, mas o Tailwinds empurra tudo para esquerda. O único jeito que eu encontrei para resolver isso foi usando a seguinte gambiarra:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
  rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
  @media (min-width: 768px) {  .gambiarra {width: 750px; margin: auto} }
</style>
<div class="gambiarra w-50 bg-success m-auto">Olá mundo</div>