I have been struggling trying to make TailwindCSS work with Angular. I followed some tutorials and looked in the documentation of Tailwind. For some reason in certain places in the Angular 9 application it's working and in lazy loaded modules it's not (so it seems)!
So first thing I did was following and implementing these tutorials:
https://dev.to/seankerwin/angular-8-tailwind-css-guide-3m45
https://dev.to/beavearony/building-tailwind-css-in-an-angular-cli-project-e04
I know for sure I have these installed correctly because of the following: My sidebar(app-sidebar) is having the correct css and styling. But the page I'm on loaded through the is not.
I will provide you with my app-routing.module, and the default layout and the dashboard component. On this Dashboard the tailwindCSS is not loading. (Funny thing: if I add an H1 element with no class, no nothing I see this element on the dashboard page.) The other elements which contain some kind of tailwindCSS class don't, Also if I drag-and-drop through the content of my dashboard component to outside this dashboard component I see my elements. although without any styling. (I do this with 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>
The following I have tried but no succes:
ViewEncapsulation ( How to get Angular's <router-outlet> to work with CSS Grid )
Added on each page a link to the CDN with tailwindCSS
Does it maby has any thing to do with the lazy loaded module?
Or maby that there is a double router-outlet? Because this is how my app.component.html looks
<router-outlet></router-outlet>
So I have figured it out. There were actually two things left I had to do. First was to set the tailwindcss configuration (tailwind.config.js) and attach it to tailwindcss with the help of my 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')
]
}
}
]
}
};
Second thing I had to do was putting the overall class of the component to the host in my Angular Component.
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 {
}
}
So looking back at my question and looking at the dashboard.component.html file, the highest div is removed and the class of that div is placed in host. Like above.
I have followed the first link in my question!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.