react-pdf-html
react-pdf-html copied to clipboard
danomatic
Tailwind CSS
I would like to use some HTML styled with Tailwind CSS. I tried to build a React component and pass the generated style as a string between the <style> tag, but it looks like it's not the right way to do it.
It is a bit a hacky way, instead of using Tailwind CSS directly I generate the CSS and then make the CSS file a js file, and I store the CSS content in an exported const. Probably not the best way to do it, but I am open to suggestions :)
// style.js
export const style = `
.text-lg {
font-size: 2rem;
}
...
`
export default style;
// myComponent.jsx
import style from './style.js';
const myComponent = () => {
return (
<div>
<style>{style}</style>
<h1 className="text-lg">The title</h1>
</div>
)
}
// index.js
import MyComponent from './myComponent';
import Html from 'react-pdf-html';
import ReactDOMServer from 'react-dom/server';
const reactComponent = (
<MyComponent></MyComponent>
)
const reactInHtml = ReactDOMServer.renderToStaticMarkup(reactComponent)
const MyPdfDocument = () => (
<PDFViewer width="100%" height="1000px">
<Document >
<Page>
<Html>{reactInHtml}</Html>
</Page>
</Document>
</PDFViewer>
);
ReactPDF.render(<MyPdfDocument />, document.getElementById('root'));
But it doesn't work of course, I get the content of the Component but not styled.
Any Idea? Am I doing this in the wrong way? Or there is currently no way to achieve it?
I checked by making css file as js file and I store the CSS content in an exported const. The component and style both are rendering.
Thank you for your reply. I think the problem is while creating the pdf. Probably when I prepare my component to be used as a React-pdf component
const reactComponent = (
<MyComponent></MyComponent>
)
const reactInHtml = ReactDOMServer.renderToStaticMarkup(reactComponent)
or when the pdf is generated
ReactPDF.render(<MyPdfDocument />, document.getElementById('root'));
the CSS is ignored, or the rendering process generate the elements ignoring the CSS. But I'm not sure.
@daaanny90 can you try adding something more standard and obvious to the style entry, such as
.text-lg {
color: red
}
I'm wondering if the issue is that the rem unit isn't supported by react-pdf
I probably did not explain the problem in a clear way, I'm sorry. The code I posted was just an example, instead of the class text-lg you should imagine the whole CSS file from Tailwind.
My problem is, I want to use Tailwind CSS to style some HTML. And I want to use this styled HTML inside the PDF, that's why I've chosen react-pdf-html to achieve that.
I thought the fastest way to do that, was to take the generated CSS file from tailwind and pass this CSS to the component. This is an example of the CSS I want to use https://gist.github.com/daaanny90/844c3ac2724746c93f640538cbf4dbc7
And this is how I packed this style as a string into a const that I passed to the component inside the <style> tag https://gist.github.com/daaanny90/340202badbab6c8e4302905b973e522f
@daaanny90 from what I understand, style tags and inline css styles work, so the question is what is failing in your case. I don't think these types of things from your tailwind example will work:
::before
::after
-webkit-text-size-adjust
tab-size
line-height: inherit; // not sure
--tw-border-spacing-x
rem units
background-color: rgb(217 249 157 / var(--tw-bg-opacity)) // not sure
@media
These are all going to get passed through to the react-pdf style system, which is a very limited subset of styles
Pseudo-elements/classes are not supported by css-select
Error: unmatched pseudo-class :before
just trying to add a custom list-style in
- .
This library now ignores pseudo elements that it can't support. Can this be closed?