Laravel 11 不编译 Tailwind CSS

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

我一直在寻找应用于 Laravel 项目的 Tailwind CSS 组件，以便能够更快地移动，我在视图中添加的每个组件都无法正常工作。它们看起来不太好，也不符合应有的样子。

我已经应用了所有内容，但即使在运行 npm run dev 时，Tailwind CSS 看起来仍然无法工作。

在 viws 中创建一个名为 home-page.blade.php 的新文件并进行布局

测试查找组件并添加它

代码：

<button
    class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
    type="button">
    Button
</button>

组件的视觉效果：

enter image description here

如我的项目所示：

enter image description here

我按照材料顺风步骤中的说明进行操作，但没有任何效果。我按照材料顺风步骤中的说明进行操作，但没有任何效果。我已经为此工作了几个小时，但我不知道如何解决它或它的原因是什么。

这里有说明

laravel tailwind-css
1个回答
0
投票

转到：https://tailwindcss.com/docs/installation并单击“播放 CDN”，这是试用和测试 Tailwindcss 的最简单方法。

将此行代码复制到顶部的部分：

<script src="https://cdn.tailwindcss.com"></script>

希望有帮助！

这是 Tailwind 显示正在使用的线路的方式：

    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.