How to use Tailwind for CSS #10

jbardnz · 2024-01-02T21:56:16Z

jbardnz
Jan 2, 2024

Hey team,

I'm wondering how we can use the Tailwind feature mentioned in the Twitter post. In particular, i'm not sure how to have Tailwind build when the PDF is generated so it only includes classes used in the blade file?

Cheers

MiloudiMohamed · 2024-01-03T15:32:17Z

MiloudiMohamed
Jan 3, 2024

I'm currently converting my old PDFs to use this package, I found no issue when using TailwindCss. I think you'll just need to import your CSS file.

The size of the downloaded files is pretty much the same as my old files.

here's my layout file

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  @vite(['resources/css/app.css'])

  <style>
    html {
      -webkit-print-color-adjust: exact;
    }
  </style>
</head>
<body>
  ...
</body>
</html>

Notice that I had to apply -webkit-print-color-adjust: exact; to the html to be able to use background colors inside my file, although I guess this is not an issue with this package itself.

2 replies

jackpipergit Jan 8, 2024

This doesn't seem to working for me? using webpack

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <style>
        html {
            -webkit-print-color-adjust: exact;
        }
    </style>
</head>
<body class="bg-gray-100 p-10">
<div class="max-w-2xl mx-auto bg-white p-8 mt-10 shadow-lg">
    <h1 class="text-3xl font-bold mb-6">Invoice</h1>

    <div class="mb-8">
        <div class="mb-2"><strong>Invoice Number:</strong> {{ $invoice->DocNum }}</div>
        <div class="mb-2"><strong>Date:</strong> {{ $invoice->DocDate }}</div>
        <div><strong>Client Name:</strong> {{ $invoice->CardName }}</div>
    </div>

    <table class="min-w-full mb-8">
        <thead>
        <tr class="bg-gray-200 text-left">
            <th class="p-2">Description</th>
            <th class="p-2">Quantity</th>
            <th class="p-2">Price</th>
        </tr>
        </thead>
        <tbody>
        @foreach ($invoice->items as $item)
            <tr>
                <td class="p-2">{{ $item->Dscription }} (SKU: {{ $item->ItemCode }})</td>
                <td class="p-2">{{ $item->quantity }}</td>
                <td class="p-2">{{ $item->price }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>

    <div class="text-right font-bold">Total: {{ $invoice->DocTotal }}</div>
</div>
</body>
</html>

freekmurze Jan 8, 2024
Maintainer

This is probably caused by the fact that your mix URL isn't public (and Chrome can't access it)

Try it with

<head>
    <title>Invoice</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

kaspernowak · 2024-05-03T20:15:23Z

kaspernowak
May 3, 2024

In my case I had to point to resources/css/app.js, like this:

<head>
    <meta charset="UTF-8">
    <title>Some Title</title>
    @vite('resources/js/app.js')
</head>

As I use vue for my frontend, which imports the resources/css/app.css file.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use Tailwind for CSS #10

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

How to use Tailwind for CSS #10

jbardnz Jan 2, 2024

Replies: 2 comments · 2 replies

MiloudiMohamed Jan 3, 2024

jackpipergit Jan 8, 2024

freekmurze Jan 8, 2024 Maintainer

kaspernowak May 3, 2024

jbardnz
Jan 2, 2024

Replies: 2 comments 2 replies

MiloudiMohamed
Jan 3, 2024

freekmurze Jan 8, 2024
Maintainer

kaspernowak
May 3, 2024