当在 php 旁边使用 tailwind 时,只有某些类可以工作。例如我可以使用 flex flex-col 但当我添加间隙 10 或边距时它不需要

问题描述 投票:0回答:1

当我将某些类应用于我的代码时。例如,

mt-4
px-3
gap-10
,它们没有任何效果。其他类别如
flex
flex-col
text-2xl
确实生效。这阻止了我按照我的意愿对齐元素。

<?php
    
// start php session
session_start();
    
include "../../config/dbConfig.php";
include "../partials/header.php";
?>
    
    
<body class="min-h-screen">
    
    <div class="container mx-auto h-screen">
        <main class="register_btn_container flex flex-col gap-5 items-center justify-center">
            <h1 class="text-5xl font-bold">Register</h1>
            <button type="button" class="bg-primary w-24 text-white shadow-md py-1 flex items-center justify-between m-10"><span class="ml-3">Join Us</span><i class="fa-solid fa-arrow-right mr-3"></i>
            </button>
            <button type="button" class="bg-secondary w-24 text-white shadow-md py-1 flex items-center justify-between "><span class="ml-3">Join Us</span><i class="fa-solid fa-arrow-right mr-3"></i>
                </button>
            <button type="button" class="bg-primary w-24 text-white shadow-md py-1 flex items-center justify-between "><span class="ml-3">Join Us</span><i class="fa-solid fa-arrow-right mr-3"></i>
            </button>
        </main>
        <aside class="img_container">hi</aside>
    
    </div>
    
</body>
</html>
tailwind-css
1个回答
0
投票

考虑检查:

  • 您使用类的文件由 Tailwind 配置中的
    content
    文件全局覆盖
    。如果 Tailwind 在扫描内容中没有“看到”类名,它不会为其生成 CSS 规则,因此类名将不起作用。
  • 对于可能与 Tailwind 生成的 CSS 规则发生冲突的任何其他 CSS。
  • 添加类后您已经运行了 Tailwind 编译。
  • 您查看网页的浏览器正在使用最新版本的 CSS 文件。您可以使用浏览器的开发人员工具来确认正在使用最新的 CSS 文件,而不是 cached。您还可以在打开开发人员工具的同时暂时禁用浏览器的缓存。
© www.soinside.com 2019 - 2024. All rights reserved.