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

Question

我正在尝试在新的Angular 8项目中添加Tailwind css，但是由于某种原因，响应式网格无法正常工作，其他组件（如卡，按钮等）也可以正常工作。 我正在关注本文medium

以我的全局styles.scss

import { AfterViewInit, Directive, ElementRef, HostBinding, Input } from '@angular/core';

@Directive({
  selector: "[appLazyLoad]"
})
export class LazyLoadDirective implements AfterViewInit {
  @HostBinding('attr.src') srcAttr = null;
  @Input() src: string;

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.canLazyLoad() ? this.lazyLoadImage() : this.loadImage();
  }

  private canLazyLoad() {
    return window && 'IntersectionObserver' in window;
  }

  private lazyLoadImage() {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(({ isIntersecting }) => {
        if (isIntersecting) {
          this.loadImage();
          obs.unobserve(this.el.nativeElement);
        }
      });
    });
    obs.observe(this.el.nativeElement);
  }

  private loadImage() {
    this.srcAttr = this.src;
  }
}



and my html is : "img appLazyLoad attr.src="../../../../assets/images/batman.jpg" />"

while component file is :

@Component({
  selector: "dashboard",
  templateUrl: "./dashboard.component.html",
  styleUrls: ["./dashboard.component.scss"]
})

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

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

它不显示任何元素，这是结果：

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>