diegomura / diegomura/react-pdf
Tailwind class shadow-* is not recognised
- 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
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