{"id":13725878,"url":"https://github.com/aanckar/react-pdf-tailwind","last_synced_at":"2025-05-16T13:07:16.054Z","repository":{"id":37736697,"uuid":"476737960","full_name":"aanckar/react-pdf-tailwind","owner":"aanckar","description":"Use Tailwind CSS to style PDFs created with react-pdf","archived":false,"fork":false,"pushed_at":"2024-02-21T18:28:12.000Z","size":287,"stargazers_count":363,"open_issues_count":6,"forks_count":16,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-12T01:37:53.475Z","etag":null,"topics":["pdf","pdf-generation","react","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aanckar.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-01T13:45:35.000Z","updated_at":"2025-05-06T23:33:39.000Z","dependencies_parsed_at":"2024-02-21T19:43:00.958Z","dependency_job_id":null,"html_url":"https://github.com/aanckar/react-pdf-tailwind","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":0.06896551724137934,"last_synced_commit":"e8aca9c31aea74b5e85f560b57fe2d8a66120c62"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aanckar%2Freact-pdf-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aanckar%2Freact-pdf-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aanckar%2Freact-pdf-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aanckar%2Freact-pdf-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aanckar","download_url":"https://codeload.github.com/aanckar/react-pdf-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535829,"owners_count":22087399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pdf","pdf-generation","react","tailwindcss"],"created_at":"2024-08-03T01:02:38.654Z","updated_at":"2025-05-16T13:07:16.019Z","avatar_url":"https://github.com/aanckar.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React PDF Tailwind\n\nUse Tailwind CSS to style PDFs created with [react-pdf](https://github.com/diegomura/react-pdf).\n\n[Try it yourself](https://react-pdf-repl.vercel.app/?cp_code=JYWwDg9gTgLgBAbzgEQgYwK4gKYDsYA0cACgIYDm2RAKtgB6FwBqw2A7nAL5wBmUEIOACIAAlGyk0MALRgAJjwD043HOzioQgNwAoUJFiI4acaRjZqHbnwHDTU2QukxSwADZtgq7Tp1oIuADO8DAcALzGpuaWABQIOnBwMAAW2DgAXIgJiXD05qqZ8Tk5_m7QgYXZxYmYwQKZQv5QuDxlbOoARm4Y2EIEVTmc_cVD2aOcAJS6OvQG8Go8pBhu8DwYuFLAAXAAgmBgMRNZieIwGM1wMQMAPKiYOPgAfAOJ12SUcIHAAF7YYUI7AAsQk-MAAnm4_ghQjEhGBpIDeJC6Ej6NJ-BxWmi2FBSGA4OQ8QihBNOM9qjkEABtAB0dJ2UFxYJiAEYAEwTAC6NJAeJiMQA-kRgEcwo9Li9qtcWOxJRSANbYMFhBDAThy6rBCFQmFCLF0aQsuAgLzSNjSKlsgAMVrAME5cHhiP10lKcA65GkXR6hptJPVFIpOLxKsWbkC2ADgcS5OjOWutAYoO1Kt15gY0jZdDcvACMg6EDcciSeVdGDqIH9sbjOQAythNttVXAANRwFlRmvXRSJmDVuMJvLJyGptiw9MyQKV0n9msAGWgaTgwDAgSwcDkhegn2A8FIOEY_iCDfMZygcFIchXwECaC85Fybl3NLgADllm5SBqKRHwOpcjwPDAHeZ5wE-HTqBAy64GBpCLtgMAvvWxbAJIyw3kQvLkLgpCfOWd5gLu37VGAn5oOoZjGAIIAQJuRBQDe5ZJOchGBEkXh3nI6zwE-5DLKQRCSLkGA3jRxYAFbljAEDEcUv7LsWDFroEL7vm4n6CNgIlTrRcAAG7YMEwAdMs66QhAmGFk-bG8nQoBMYEeKsLgsk5N0UhMV4L4sHp-5MbykJrpeuF6csYAYC45hwNAOHiC-ACySxKXAEUXmg9yOS5NbFDw2DWd5wC-SATF4KAKXNAJKUrAx5FsVpuT8GxkhEB0xl4FxggGckwH8a5iSQSpJC4oZeDwCua6CNAd6WYFMCsASuJ6cAci4TASlzQAjj0F6MCthEmYEfX6bupDYLkwQvsQySkBG6lMZCHlsbgH6VUeEZbZR9UmiljDmOA5ZHeFbhLbFcC4NgW3YDSrndr2s5SooMpsPDiQTKSkrdu82D9t2dxYKNsZTDo6pAA\u0026modules=true) in the `react-pdf-repl` interactive playground.\n\n## Example\n\n```jsx\nimport { Document, Page, Text, View, StyleSheet } from \"@react-pdf/renderer\";\nimport { createTw } from \"react-pdf-tailwind\";\n\n// The 'theme' object is your Tailwind theme config\nconst tw = createTw({\n  theme: {\n    fontFamily: {\n      sans: [\"Comic Sans\"],\n    },\n    extend: {\n      colors: {\n        custom: \"#bada55\",\n      },\n    },\n  },\n});\n\nexport default function MyPdf() {\n  return (\n    \u003cDocument\u003e\n      \u003cPage size=\"A4\" style={tw(\"p-12 font-sans\")}\u003e\n        \u003cView style={tw(\"p-20 bg-gray-100\")}\u003e\n          \u003cText style={tw(\"text-custom text-3xl\")}\u003eSection #1\u003c/Text\u003e\n        \u003c/View\u003e\n        \u003cView style={tw(\"mt-12 px-8 rotate-2\")}\u003e\n          \u003cText style={tw(\"text-amber-600 text-2xl\")}\u003eSection #2\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/Page\u003e\n    \u003c/Document\u003e\n  );\n}\n```\n\nMore detailed examples can be found in the [examples](https://github.com/aanckar/react-pdf-tailwind/tree/main/examples) folder.\n\n## Installation\n\n```js\n// Or pnpm, yarn...\nnpm install react-pdf-tailwind\n```\n\n## Usage\n\nThe `createTw` function takes two arguments: the first is a Tailwind config object (which currently only looks at the `theme` settings), and the second is an optional options object with the following defaults:\n\n```js\nconst tw = createTw(\n  // Tailwind config\n  {\n    theme: ...\n  },\n  // Additional options\n  {\n    // Set the base font size in points (see note below regarding units)\n    ptPerRem: 12,\n  }\n);\n```\n\n## Notes\n\n- Supports most of the CSS properties that make sense in a PDF context, and are supported by `react-pdf` (see [this list](https://react-pdf.org/styling#valid-css-properties))\n- Default font family classes are excluded, since you have to [include your own fonts anyway](https://react-pdf.org/fonts)\n- Internally uses `pt` as the default unit (supported units can be found [here](https://react-pdf.org/styling#valid-units)), using the default convention `1rem = 12pt` (this can be changed in the options)\n- Since `react-pdf` uses [Yoga](https://yogalayout.com/) internally, some defaults differ from the web standard (for example, `flex-direction` defaults to `column`, which can be fixed by adding the `flex-row` class where needed)\n- Modifiers like breakpoints (which could technically make sense) aren't supported yet\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faanckar%2Freact-pdf-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faanckar%2Freact-pdf-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faanckar%2Freact-pdf-tailwind/lists"}