Сетка, реагирующая на попутный ветер, не работает под углом 8

Question

Я пытаюсь добавить Tailwind css в новый проект Angular 8, но по какой-то причине адаптивные сетки не работают, другие компоненты, такие как карты, кнопки и т. Д. Работают отлично. Я следую этой статье 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>