DEV Community: Amadou Sall

How to Add Tailwind CSS to Your Angular Application

Amadou Sall — Sat, 13 Feb 2021 11:26:08 +0000

Tailwind CSS is a utility-first CSS framework that makes it easy to build outstanding design systems. It's based on the philosophy that pretty much anything you can do with CSS, you can achieve it by adding a bunch of utility classes directly in your HTML. Angular, on the other hand, is a platform that allows you to build high-quality enterprise applications. Combine Angular with Tailwind CSS and you have a perfect stack for building top-notch web applications.

In this article, I will walk you through how you can add Tailwind CSS to your Angular application.

This article assumes that you're using Angular CLI version 11.2.0 or higher.

1. Generate a new Angular application

Let's start by creating a new Angular project using the ng new command:

ng new my-app

When the CLI asks you "which stylesheet format would you like to use?" choose CSS because:

With Tailwind, you don't need a CSS preprocessor like Sass. You'll rarely need to write custom CSS anyway.
Your CSS will compile much faster because it won't need to pass through multiple compilation pipelines.

If you want to use a CSS preprocessor, or have an existing project, don't worry! The rest of this guide is still relevant.

2. Install the needed dependencies

Now, install the required dependencies via npm:

npm install postcss --save-dev
npm install tailwindcss

If you use npm, you technically don't need to manually install the postcss package. But doing so will help you avoid hoisting issues and make your setup future-proof.

3. Create your configuration file

npx tailwind init

This command will create the tailwind.config.js file which contains your Tailwind CSS configuration. This is where you can customize your design system and other Tailwind options like Purge CSS.

4. Configure Purge CSS

Tailwind provides out of the box support for Purge CSS—a tool that will remove all unused Tailwind utility classes from your production bundle. Open the tailwind.config.js file and replace its content with the following:

module.exports = {
  purge: {
    enabled: process.env.WEBPACK_DEV_SERVER === 'true' && process.argv.join(' ').indexOf('build') !== -1,
    content: [
      "./src/**/*.{html,ts}",
      "./projects/**/*.{html,ts}"
    ]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

We need this because Tailwind generate thousands of CSS classes by default—many of which we won't use in your application. The configuration above tells Purge CSS to analyze all the HTML and TypeScript files inside the src and projects folders and remove any CSS class that is not used inside those files when using ng build. This will leave you with a very lightweight CSS bundle for production. When using ng serve the full set of Tailwind classes will still be loaded.

5. Add Tailwind directives to your global CSS file

Open your global CSS file (src/style.css) and add the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

With this, Tailwind will process the @tailwind directives and inject its base, components, and utilities classes.

6. Enjoy!

You can now start your Angular application and enjoy using Tailwind:

npm start

Angular Pipes: Integrated Unit Testing

Amadou Sall — Fri, 16 Feb 2018 13:33:17 +0000

In my previous blog post, we learned that there were two ways to unit test Angular pipes:

Isolated tests (without TestBed)
Integrated tests (with TestBed)

But we put the focus on isolated tests. I this article, we are going to switch our focus on how to write integrated unit tests for Angular pipes.

We talk about integrated unit testing when we are testing the pipe in the same condition that it will be used at runtime. This means that we will test it when used inside an Angular component's template.

The Pipe Under Test

In case, you didn't read my previous blog post, here is the code of the pipe we are going to test. It is a simple pipe that transforms an array to its mean.

Implement the PipeTransform interface.
Return the mean of the array of numbers.

The full source code of this pipe can be found at the end of the article or here.

We Need a Host Component

Because we want to write integrated tests for our pipe, we need a component that hosts our pipe. A host component is like any other Angular component. There is nothing specific about it. It is just a way to use the pipe in an Angular component's template.

The code for the host component is straightforward:

Define property that holds the values to be passed to the pipe
Display the result of the transformation of those values through the pipe.

Setting Up the Integrated Tests!

TestBed.configureTestingModule, as its name implies, allows us to create a specific Angular module for testing purposes. It accepts pretty much the same parameters as the NgModule decorator.
Notice that we wrap the body of our first beforeEach inside a special Angular zone. We do so by calling the async function, one of the many Angular testing utilities. We need this because TestBet.compileComponents is asynchronous. So this ensures that our component's template is compiled beforehand (although technically this is not necessary in this example because our template is inlined).
A ComponentFixture is a wrapper around our host component. It allows us to interact with the environment of our component like its change detection or its injector.
The fixture is returned by TestBed.createComponent.
From the fixture, we can get the DebugElement. The DebugElement is a wrapper around our component's HTML element. It provides more functionality than the native HTMLElement.
We can also get the real instance of our component from the fixture.

We made sure that our fixture can be properly instantiated. Now we can start writing real expectations.

The Actual Tests

We start by updating the values property of our component and we call fixture.detectChanges. fixture.detectChanges kicks off change detection for our component. It is necessary if we want our template to reflect the changes we made to the component class.
Next, we use debugElement.query passing it a predicate By.css('div'). This allows us to target the div element by using its CSS selector.
From there, we can get the native HTMLDivElement.
Then we can write our expectations.

The full source code of this pipe can be found at the end of the article or here

In this article, we learned how to write integrated unit tests for our Angular pipes. The setup for this kind of is more complicated than for isolated unit tests. There are also more concepts involved because we need to use Angular testing utilities. But the effort is forth it as integrated unit tests can help us detect bugs that isolated tests cannot reveal.

Thank you very much for reading!

Listing

mean.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mean'
})
export class MeanPipe implements PipeTransform {

  transform(value: number[]): number {
    if (!Array.isArray(value)) {
      return value;
    }
    if (value.length === 0) {
      return undefined;
    }
    const sum = value.reduce((n: number, m: number) => n + m, 0);
    return  sum / value.length;
  }
}

mean.pipe.integrated.spec.ts

import { MeanPipe } from './mean.pipe';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';


@Component({
  template: '<div> {{ values | mean }}</div>'
})
export class MeanPipeHostComponent {
  values: number[];
}

describe('MeanPipe inside a Component', () => {
  beforeEach(async(() => {
    TestBed
      .configureTestingModule({
        declarations: [MeanPipe, MeanPipeHostComponent]
      })
      .compileComponents();
  }));

  let fixture: ComponentFixture<MeanPipeHostComponent>;
  let debugElement: DebugElement;

  let component: MeanPipeHostComponent;

  beforeEach(() => {
    fixture = TestBed.createComponent(MeanPipeHostComponent);
    debugElement = fixture.debugElement;
    component = fixture.componentInstance;
  });

  it('should create an instance', () => {
    expect(fixture).toBeTruthy();
  });

  it('should display 1', () => {
    component.values = [1, 1];
    fixture.detectChanges();

    const div: HTMLDivElement = debugElement
      .query(By.css('div'))
      .nativeElement;

    expect(div.textContent.trim()).toEqual('1');
  });

  it('should display 0', () => {
    component.values = [1, -1];
    fixture.detectChanges();

    const div: HTMLDivElement = debugElement
      .query(By.css('div'))
      .nativeElement;

    expect(div.textContent.trim()).toEqual('0');
  });

  it('should display nothing', () => {
    component.values = [];
    fixture.detectChanges();

    const div: HTMLDivElement = debugElement
      .query(By.css('div'))
      .nativeElement;

    expect(div.textContent.trim()).toEqual('');
  });
});

Angular Pipes: Isolated Unit Testing

Amadou Sall — Fri, 09 Feb 2018 11:34:08 +0000

In Angular, pipes allow us to transform data before displaying it. Angular comes with a range of built-in pipes, but sometimes we need to write our own custom pipes. Well, in this case, we also have to write unit tests for them.

A pipe is one of the most simple Angular concepts.It's a class annotated with the @Pipe decorator that implements the PipeTransform interface. Concretely, a pipe class has one method, the transform method:

Because pipes rarely interact with DOM elements, they are very easy to test. Technically, we can test them without using the Angular testing utilities, or TestBed. But it is best to write some Angular tests for pipes because we will want to detect potential runtime bugs when pipes are used in conjunction with Angular components.

Therefore, we should write two types of unit tests:

Isolated tests (without TestBed)
Integrated tests (with TestBed)

In this article, we will learn how to write isolated unit tests for our pipes.

In a next blog post, we will see how to test pipes using TestBed aka Angular tests.

We talk about isolated unit testing when we are testing the pipe as a standalone TypeScript class.

The Code for the Pipe (mean.pipe.ts)

To begin, let's write a pipe that transforms an array to its mean.

Implement the PipeTransform interface.
Return the mean of the array of numbers.

The full source code of this pipe can be found here.

Testing the Pipe in Isolation (mean.pipe.spec.ts)

Declare a variable that will hold an instance of the pipe.
Create a new instance of the MeanPipe before every single test runs.
Check that the pipe is correctly instantiated.

Note that we don't need a BeforeEach block because this pipe's transform method is a pure and stateless function.

Once we know that our pipe can be instantiated properly, we can start to write test suites.

The 'Bad Inputs' test suite checks the behavior of our pipe when unexpected values are passed to its transform method.
The 'Calculations' test suite checks if the pipe transforms the data correctly when correct inputs are passed to it.

The full source code of these test suites can be found here

Summary

In this article, we learned that there were two ways to unit test Angular pipes: isolated tests and integrated tests. But we put the focus on isolated tests and saw how easy it is to write isolated tests for our pipes.

In my next blog post, we will learn how to write integrated tests for our Angular pipes.

Thank you very much for reading!