Angular 中使用 tailwindcss3.0

官方的安装流程

ng new my-project
# 我选择了 less
cd my-project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

修改 tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改 ./src/styles.less

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

这里我要吐槽一下，vscode对于上图中的三行代码发出了警告：

好了，我没找到好方法取消警告，选择忽略，继续。

# 启动 angular
ng serve

修改页面 src/app/app.component.html

<section class="p-8">
  <button class="m-8">默认按钮</button>
  <button
    type="button"
    class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 ..."
  >
    Hover me
  </button>
</section>

问题

app.component.html 和官方的示例样式不一致。

图1（我的样式）

图2（官方示例的样式）

我初步猜想，是因为官方示例的样式类不完整。同时，我发现，button的默认样式似乎没有了。于是我把styles.less 里面的三行引用代码注释，发现默认样式就回来了。

这里又有了一个疑问，如果和其他的UI框架（如 Ant Design 或 Material ）一起使用，是否会干扰到其他框架的样式呢？

同时使用 Ant Design 和 tailwind

# 终端运行命令添加 ant design 库
ng add ng-zorro-antd

<button nz-button nzType="primary" (click)="share()">Primary</button>
<section class="p-8">
  <button class="m-8">默认按钮</button>
  <button
          type="button"
          class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 px-4 py-2 rounded-md text-white font-medium"
          >
    Hover me
  </button>
</section>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.less'],
})
export class WelcomeComponent implements OnInit {
  constructor() {}
  
  ngOnInit() {}
  
  share() {
    window.alert('Not open for business yet!');
  }
}

import { NgModule } from '@angular/core';

import { WelcomeRoutingModule } from './welcome-routing.module';

import { WelcomeComponent } from './welcome.component';
import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  imports: [WelcomeRoutingModule, NzButtonModule],
  declarations: [WelcomeComponent],
  exports: [WelcomeComponent],
})
export class WelcomeModule {}

显示效果如下：

目前看不出什么问题。

遇到个样式不奏效的问题！

在这个部分 tailwindcss 字体颜色部分

我的效果是这样的：

不知道什么鬼，谁能帮我解决一下？虽然这个效果我可以单独加样式类完成，但是这样示例我用不起来，我觉得会对代码的精简有影响。