Printing area not working properly in print js

I am trying to implementing POS printing using print js (https://printjs.crabbly.com/) . I am using it in laravel framework. It's working but I can not use any css effect on it. I also tried but not working .

Here is my expected invoice format

              My CAFE

     Item 1             10 USD
     Item 2              5 USD
     -------------------------
                 Total: 15 USD
                   Vat:  2 USD

Here is My code

    <div id="printAreaInvoice" style="visibility: hidden;width: 450px;">
        <p class="address">
           My Cafe <br>
        </p>

        <p>
          <span> Item 1 </span>  <span class="price"> 10 </span>
          <span> Item 2 </span>  <span class="price"> 05 </span>
        </p>
        
        <p>
          ----------------------------------------
          <span class="price"> Total 15 </span>
        </p>
    </div>

$(document).on('click','#print_order',function () {
    printJS({
        maxWidth: 450, // the width of my paper
        printable: 'printAreaInvoice', // the id
        type: 'html',
        css: '{{ asset("Dashboard/print/print.css") }}'
    });
});

in print.css

@media print {
    #print p {
        font-size: 10pt;
    }
    #print .address{
        font-size: 10pt;
        text-align: center;
    }
    #print .price{
        font-size: 10pt;
        float: right;
    }
}

Try removing the #print before every tag in the print.css files. Those styles are already active in the print media thanks to @media print.

Your print.css should look like:

@media print{
    p{
        font-size: 10pt;
    }
    .address{
        font-size: 10pt;
        text-align: center;
    }
    .price{
        font-size: 10pt;
        float: right;
    }
}

If the URL to the CSS is correct, the printing preview should show the correct style.