Fix Tailwind CSS Not Working in Angular Component SCSS Files

Tailwind CSS is a utility-first CSS framework that helps to simplify the styling process by using an enormous number of pre-defined classes that can be applied directly in HTML. However, when using it with Angular component SCSS files, sometimes issues occur, especially since Tailwind CSS is not designed to be imported into individual component styles by default. This article addresses key issues as to why Tailwind CSS doesn't work as it would in an Angular component SCSS file and proposes ways around the problems that can come with it.

Table of Content

There could be multiple reasons why Tailwind CSS does not work in Angular component SCSS files; we have covered all those reasons.

• Tailwind CSS Work Globally, Not by the Component
• Angular Component Styles Are Encapsulated by Default
• Tailwind Classes are not Recognized in SCSS Files
• Missing Tailwind Directives or Misconfiguration
• Caching Issues

Tailwind CSS Work Globally, Not by the Component

Tailwind CSS is typically used globally in an application. When you import Tailwind into an Angular project, it should only be imported once, preferably in a global stylesheet such as `styles.scss` or `styles.css`. A global import allows utility classes to be available throughout your entire Angular application.

Solution

Use Tailwind CSS effectively within Angular by importing it globally in the `src/styles.scss` file:

tailwind base;
tailwind components;
tailwind utilities;

This configuration makes all Tailwind utilities available throughout your app. Generally, you won't have to import Tailwind into your individual component SCSS files since Angular will apply the global styles to the templates of your components, too.

Angular Component Styles Are Encapsulated by Default

Angular components utilize View Encapsulation to isolate styles to individual components. Without any configuration, Angular will append a unique attribute selector to each component's HTML elements and styles so that they are not leaked into other parts of the application. This can make Tailwind classes defined globally to be ignored inside SCSS files of components.

Angular's 3 Modes of Encapsulation

• Emulated (default): Styles are scoped to the component but global styles are still applied.
• None: No encapsulation at all, so global styles are applied to the component.
• Shadow DOM: Uses the Shadow DOM v1 spec to provide a strict encapsulation of styles.

Solution

If you need Tailwind utilities to affect a specific component but are having issues, you can simply set `ViewEncapsulation` to `None` in that component's TypeScript file:

import { Component, ViewEncapsulation } from "@angular/core";

Component({
  selector: "app-example",
  templateUrl: "./example.component.html",
  styleUrls: ["./example.component.scss"],
  encapsulation: ViewEncapsulation.None,
});
export class ExampleComponent {}

This removes the encapsulation, so Tailwind classes can be applied directly within the component. However, this method should be used with caution as it may lead to style conflicts between components.

Tailwind Classes are not Recognized in SCSS Files

This could also be the reason why Tailwind CSS does not work in Angular component SCSS files: Tailwind classes are not automatically available within the SCSS files found inside the components. The classes of Tailwind CSS are created through a PostCSS plugin and need to have an `@apply` directive to use them from an SCSS or CSS file. But the `@apply` directive only works on certain setups, so in the case of Angular, its SCSS compilation won't find it by default.

Solution

Apply Tailwind CSS classes in Angular by directly using it in the HTML template of the component rather than using the SCSS files since the compatibility of SCSS can be difficult.

Tailwind configuration in SCSS with PostCSS

If you were to use Tailwind's `@apply` directive inside the SCSS files, sometimes you'll need to modify the Angular build configuration to allow the post-processing of Tailwind's CSS code. In your project root, you append a `postcss.config.js` file when it is missing:

tailwindcss: {},
autoprefixer: {},
},
};

Then, ensure your Angular project is configured to process this PostCSS setup. This may require additional configuration depending on your Angular version and build setup.

Missing Tailwind Directives or Misconfiguration

Sometimes, Tailwind CSS is not working due to missing directives or misconfiguration. Tailwind requires certain directives (`@tailwind base`, `@tailwind components`, `@tailwind utilities`) to load its styles.

Solution

Make sure you have imported the Tailwind directives correctly in your global `styles.scss` file. If you haven't done so, Tailwind's styles will not be available in your Angular components.

tailwind base;
tailwind components;
tailwind utilities;

Double-check your Tailwind configuration file (`tailwind.config.js`) to ensure it includes the correct paths to all of your Angular component templates. The `content` array in `tailwind.config.js` should include paths to your Angular components so Tailwind will scan them and generate the appropriate CSS.

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

Caching Issues

Maybe in your configuration somewhere, some Tailwind changes will not be reflected; well, perhaps the problem stems from the caching of styles that are not recognized within an Angular build cache.

Solution

You'll have to restart and clear the Angular's cache for the above process to become possible. You have to stop the server with an 'ng stop'. After which, you can run the ng serve-force command:

ng serve --force

The above command forces Angular to recompile your project using the most recent updates for the Tailwind.

Therefore, for this integration with Angular components of SCSS files, the greatest hurdles are mainly based on the structure and the use of default encapsulation offered in Angular's component-based architecture. Practically applied classes from Tailwind CSS directly onto an Angular-based project are possible only at the level of the usage within HTML templates via global styles and if need be via adjustments in ViewEncapsulation for instance. All of these form an important requirement while utilizing Tailwind CSS at your end to ease style procedures while building applications or websites in Angular.