shlogg · Early preview
Alish Giri @alishgiri

Creating Invoices With HTML & CSS: A Comprehensive Template

Separate concerns in your code by breaking down sections like header, table & footer into smaller functions or modules. Use a robust templating engine & improve code organization for better maintenance.

I have been experementing with printing invoices using Javascript and Tailwindcss. After several trials and errors the following is the best configuration I found to get the optimal results.

  
  
  (optional) Configure Tailwindcss

If you are using tailwindcss to style your invoice then you can set the following configuration to access to 'print' and 'screen' prefixes that you can use to hide/show content based on your requirements.

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            screens...