顺风响应网格在角度 8 中不起作用

Question

我正在尝试在新的 Angular 8 项目中添加 Tailwind css，但由于某种原因，响应式网格无法正常工作，其他组件（如卡片、按钮等）运行良好。 我在关注这篇文章medium

在我的全局styles.scss中

@tailwind base;
@tailwind components;
@tailwind utilities;

我在 angular.json 中添加了我的 customWebpackConfig。 如果我使用的是 HTML

<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-500"></div>

它没有显示任何元素，结果如下：

Answer 1

这是因为你的 div 没有内容。如果你想要一条灰线，你需要使用pb-4而不是mb-4

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<!-- If you want a gray line, you should be using pb-4 -->
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 pb-4 bg-gray-500"></div>

<!-- instead of mb-4, because it has no content to apply the bg-gray-500 to. -->
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-500"></div>