Tailwind 响应式网格在 angular 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>

Tailwind 响应式网格在 angular 8 中不起作用

Tailwind responsive grid not working in angular 8

angular

tailwind-css