div width not taking up all the space available in angular with multiple components

Issue

This project is done with Angular and Tailwind CSS.

Issue: My divs do not take up all the space available. Each 'a' is a div with a blue background color. The whitespace is the empty space I would like to get rid of

My code: Here are the simplified contents of my main html file

      <div class="container !mx-0 flex flex-row justify-between">
        <app-photo-card
          *ngFor="let photo_card of photo_cards"
          [photo_card]="photo_card"
          [class]="'w-full'"
        ></app-photo-card>
      </div>

simplified contents of main ts file

  photo_cards = [
    {
      title: 'a',
      content: "",
      img_src: '',
    },
  ];

and here are the contents of my photo card component html file

<div class="w-full">
  <div class="w-full bg-blue-500">a</div>
</div>

Tried a similar version of this code with vanilla html and css and it seemed to work as expected. Really unsure on what I'm doing wrong here.

Expected output would be the 4 'a' divs with the blue background spanning across the screen which would result in no whitespace.

Solution

It turns out my issue was that the tailwind css container class has a max-width property setting.

class       breakpoint    properties

container   None          width: 100%;
            sm (640px)    max-width: 640px;
            md (768px)    max-width: 768px;
            lg (1024px)   max-width: 1024px;
            xl (1280px)   max-width: 1280px;
            2xl (1536px)  max-width: 1536px;

Removing the container class worked for me.

Answered By - jspoh