In my Angular 12 project, I have integrated Tailwind CSS. The structure of the package.json is as below:
{
"name": "some-angular-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
...
},
"devDependencies": {
...
}
}
I followed the installation guide for Tailwind CSS available here. My tailwind.config.js file is structured like this:
module.exports = {
...
};
Furthermore, I have configured my styles.css file to work with Tailwind CSS:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
...
Now, I am attempting to create a header component within my app.component. While basic styling seems to be working fine, making changes in the :root class doesn't reflect in the browser as expected. Here's an example:
:root {
@apply flex flex-row items-center content-between h-8 bg-purple max-h-8 text-pink
}
The rendered output looks different than intended. Also, applying Tailwind CSS attributes directly in the HTML template sometimes works and sometimes doesn't. For instance:
<app-header class="bg-purple"></app-header>
I'm looking for guidance on how to ensure consistent application of Tailwind CSS styles to components directly.