diegomura / diegomura/react-pdf

Tailwind class shadow-* is not recognised

Open
#3,558 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**
When using `@react-pdf/tailwind`, if you use the Tailwind classes `shadow-*`, it complains with the error

```
@react-pdf/tailwind: Invalid class "shadow-lg"
```

**To Reproduce**
Steps to reproduce the behavior including code snippet (if applies):

```ts
# main.tsx
import { Document, Page, Text, View } from "@react-pdf/renderer";
import { createTw } from "@react-pdf/tailwind";
import { renderToFile } from "@react-pdf/renderer";

const tw = createTw({});

const items = [
{ name: "Widget", qty: 2, price: 9.99 },
{ name: "Gadget", qty: 1, price: 19.99 },
{ name: "Doohickey", qty: 5, price: 2.5 },
];

export function Invoice() {
return (




Invoice

{items.map((item) => (

{item.name}

{item.qty} x ${item.price.toFixed(2)}


))}



);
}
await renderToFile(, "invoice.pdf");
```
```json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "Bundler",
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true
},
"include": ["src"]
}
```

```bash
pnpm add @react-pdf/renderer @react-pdf/tailwind react tailwindcss
pnpm add --save-dev @types/node @types/react tsx typescript
```

_You can make use of [react-pdf REPL](https://react-pdf.org/repl) to share the snippet_

**Expected behavior**

All Tailwind classes should be able to be used.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**

- OS: [e.g. MacOS, Windows] macOS 15.7.4
- Browser [e.g. chrome, safari] N/A
- React-pdf version [e.g. v1.1.0] v4.9.0

Contributor guide

Open the contributing guide

Research direction

Reproduce the reported error with the provided TypeScript invoice example, using @react-pdf/tailwind and the shadow-lg class. Trace how the Tailwind class is validated, then verify that shadow-* classes are accepted without the invalid-class error and that the existing example still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, tailwindcss, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
66/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.