TailwindCSS 在 Angular（延迟加载）子组件中不起作用

Posted 2023-03-06

【中文标题】TailwindCSS 在 Angular（延迟加载）子组件中不起作用

【英文标题】：TailwindCSS not working in Angular (lazy loaded) Child component

【发布时间】：2020-08-28 03:28:43

【问题描述】：

我一直在努力让 TailwindCSS 与 Angular 一起工作。我遵循了一些教程并查看了 Tailwind 的文档。出于某种原因，在 Angular 9 应用程序的某些地方它正在工作，而在延迟加载的模块中它不是（看起来如此）！

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

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

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

我确信我已经正确安装了这些，原因如下： 我的侧边栏（应用侧边栏）具有正确的 CSS 和样式！但是我加载的页面不是。

我将为您提供我的 app-routing.module、默认布局和仪表板组件。在此仪表板上，tailwindCSS 未加载。 （有趣的是：如果我添加一个没有类的 H1 元素，我在仪表板页面上什么也看不到这个元素！）其他包含某种 tailwindCSS 类的元素没有。此外，如果我将仪表板组件的内容拖放到此仪表板组件之外，我会看到我的元素，尽管没有任何样式。 （我用 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- 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 <router-outlet> to work with CSS Grid)

使用tailwindCSS在每个页面上添加指向CDN的链接

这可能与延迟加载的模块有关吗？

或者可能有双路由器插座？ 因为这就是我的 app.component.html 的样子

<router-outlet></router-outlet>

【问题讨论】：

如何在应用程序中导入tailwindCSS？

@BunyaminCoskuner 我知道 100% 确定 tailwindCSS 已导入。我用顺风特定代码检查了这一点。该问题与未正确安装 Tailwind 无关。因为 Angular 中的子组件被放入它自己的元素中，所以 tailwindcss 连接丢失了。什么我你可以看到我自己的答案

我只是想看看你是如何导入它的。正如您所说，它可能不相关，但它可能会帮助我们解决问题

添加了我的答案 ;) @BunyaminCoskuner

【参考方案1】：

所以我想通了。实际上还有两件事我必须做。 首先是设置tailwindcss配置(tailwind.config.js)并在我的webpack.config.js

的帮助下将它附加到tailwindcss

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')
            ]
          
        
      ]
    
  ;

我要做的第二件事是将组件的整个类放到我的 Angular 组件中的主机上。

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 的类被放置在主机中！如上。

我已经关注了我的问题中的第一个链接！