Chapter 1: Introduction to Tailwind CSS

This year, I embarked on a journey to master Tailwind CSS, integrating it into several projects. The extensive array of CSS classes it provides allows developers to meet various design needs, resulting in stunning user interfaces when applied correctly.

In this article, I will guide you on how to enhance your web application's user experience by customizing the Angular Material snack bar with Tailwind CSS. Below, you can see the before-and-after comparison of the mat-snackbar's default stylesheet.

Final Result Preview

At the top, you can observe the original look of the Angular Material snack bar, while the bottom section showcases three styles—filled, outlined, and soft—for notifications categorized as info, success, and error.

If you prefer visual instructions, check out this video:

Chapter 2: Setting Up the Project

To create these snack bars, I initiated a new Angular application named ng-snackbar-tailwind by executing:

ng new ng-snackbar-tailwind

I then incorporated the heroes component from the Angular Tour of Heroes tutorial into the project.

Next, I installed Angular Material with the following command:

ng add @angular/material

I selected the Indigo/Pink prebuilt theme and confirmed the prompts regarding global typography styles and browser animations for Angular Material. This action updates the package.json file with the necessary dependencies.

Project Overview

Looking at the heroes component, you will notice it displays a list of heroes, and when a user clicks on a hero, their details (ID and name) appear below. To view the app, I ran ng serve and checked it in the browser.

Integrating the Snack Bar

Now, let's revisit the source code and modify heroes.component.ts as follows:

In the constructor, I injected MatSnackBar and invoked snackbar.open(..) to display the hero's name when selected. Remember to include MatSnackBarModule in the imports section of the AppModule.

I configured the open(..) method of the snackbar object with some parameters: duration: 5000 (the snackbar will display for 5 seconds) and positioning options that center it at the top of the screen.

After re-running ng serve, I could observe the default snackbar's behavior upon clicking a hero's name.

Adding Tailwind CSS

The next step involves integrating Tailwind CSS into the project by following the official installation instructions. First, install Tailwind CSS and its dependencies—PostCSS and Autoprefixer:

npm install -D tailwindcss postcss autoprefixer

Alternatively, you can utilize Yarn. After this, generate a tailwind.config.js file with:

npx tailwindcss init

You must then update the content block in the generated config file to include "./src/**/*.{html,ts}". Additionally, add three directives to the /src/styles.scss file to set up Tailwind.

Customizing the Snack Bar Styles

To style the Angular Material snack bar using Tailwind's utility classes, I will include custom CSS classes in /src/styles.scss. I aim to create three snack bar types: info, success, and error, each with distinct appearances: filled, outlined, and soft.

For the filled appearance, I will use:

• bg-green-600 for success messages
• bg-red-600 for error messages
• bg-gray-600 for informational messages
• text-white for the font color

Now, in heroes.component.ts, I will define a variable to hold the configuration parameters. I will add a panelClass parameter to specify a custom stylesheet for the snack bar container and extend the display duration from 5,000 to 50,000 milliseconds for easier CSS adjustments in the browser's DevTools.

Finally, I will refine the code design by creating a reusable method named openSnackBar(), which accepts parameters for message, duration, appearance, and type. The appearance can be 'fill', 'outline', or 'soft', defaulting to 'fill', while the type can be 'info', 'success', or 'error', defaulting to 'info'.

In the onSelect() method, I replaced the last line with this.openSnackBar(message, 5000, 'soft', 'info'). Now, we can observe the results in the browser, showcasing the three types and appearances of snack bars.

Update for Angular 15 Users

Update on December 23, 2022: If you implement the above stylesheet in a project using Angular 15 and Angular Material, you may notice that your custom CSS does not apply. The snack bar's background color remains unchanged regardless of the message type.

This issue arises because Angular Material 15 adopts Material Design-based Components (MDC). To rectify this, simply prefix your CSS classes with .mat-mdc-snack-bar-container, followed by snackbar-type-(appearance)-(messageType), and append .mdc-snackbar__surface.

If your snack bar includes buttons, ensure you change .mat-button or .mat-button-wrapper to .mat-mdc-button. Additionally, override the color property for .mat-mdc-snack-bar-container .mdc-snackbar__label by adding @text-white #{'!important'}.

Further Learning

If you have any inquiries or require clarification, feel free to leave a comment. Thank you for reading!

To explore more about Angular and Tailwind CSS, check out this informative video: