不工作在角(延迟加载)子组件中的TailwindCSS

Question

我一直在努力使TailwindCSS与棱角一起工作。我学习了一些教程，并查看了Tailwind的文档。由于某些原因，在角9应用程序中的某些地方，它正在工作，而在延迟加载的模块中，它不是(看起来是这样的)！

所以我做的第一件事就是遵循并实现这些教程：

https://dev.to/seankerwin/angular-8-tailwind-css-guide-3m45

https://dev.to/beavearony/building-tailwind-css-in-an-angular-cli-project-e04

我知道我已经正确安装这些是因为以下原因:我的侧边栏(app-侧边栏)有正确的css和样式！但我上的那一页不是。

我将为您提供我的app-routing.module，以及默认布局和仪表板组件。在这个仪表板上，tailwindCSS没有加载。(有趣的是:如果我添加了一个没有类的H1元素，那么在仪表板页面上就看不到这个元素了！)另外，如果我拖放仪表板组件的内容到这个仪表板组件的外部，我会看到我的元素，尽管没有任何样式。(我用Chrome DevTools做这件事)

app-routing.module.ts

  {
    path: 'login',
    loadChildren: () => import('./modules/login/login.module').then(m => m.LoginModule)   
  },
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    children:[
      {
        path: 'dashboard',
        loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule)
      }
    ]
  },
  { path: '**', redirectTo: '' }
];

default-layout.component.html

<div class="h-screen flex overflow-hidden bg-gray-100">
    <app-sidebar></app-sidebar>

    <div id="content">
        <router-outlet></router-outlet>
    </div>
</div>

dashboard.component.html

<h1>Dashboard</h1>

<div class="flex flex-col w-0 flex-1 overflow-hidden">
    <div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
      <button class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:bg-gray-200 transition ease-in-out duration-150" aria-label="Open sidebar">
          <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
    </div>
    <main class="flex-1 relative z-0 overflow-y-auto pt-2 pb-6 focus:outline-none md:py-6" tabindex="0">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
        <h1 class="text-2xl font-semibold text-gray-900">Dashboard</h1>
      </div>
      <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
        <!-- Replace with your content -->
        <div class="py-4">
          <div class="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
        </div>
        <!-- /End replace -->
      </div>
    </main>
  </div> 

以下是我试过但没有成功的地方：

ViewEncapsulation (How to get Angular's to work with CSS Grid)

在每个页面上添加一个带有tailwindCSS的CDN链接。

它与延迟加载模块有任何关系吗？

或者说有一个双路由器出口？因为我的app.component.html就是这样的

<router-outlet></router-outlet>

Answer 1

所以我想通了。其实我还有两件事要做。首先，在我的(tailwind.config.js)的帮助下，设置尾风配置webpack.config.js并将其附加到尾风。

module.exports = {
    module : {
      rules: [
        {
          test   : /\.scss$/,
          loader : 'postcss-loader',
          options: {
            ident  : 'postcss',
            syntax: 'postcss-scss',
            plugins: () => [
              require('postcss-import'),
              require('tailwindcss')('./tailwind.config.js'),
              require('autoprefixer')
            ]
          }
        }
      ]
    }
  };

我必须做的第二件事是将组件的整体类放到我的角组件中的主机上。

dashboard.component.ts

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  host: {
    class: "flex flex-col w-0 flex-1 overflow-hidden"
  }
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

因此，回顾我的问题，查看dashboard.component.html文件，删除最高的div，并将该div的类放置在主机中！就像上面一样。

我遵循了我问题中的第一个环节！