Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tailwind CSS #49

Open
daaanny90 opened this issue Jan 25, 2023 · 8 comments
Open

Tailwind CSS #49

daaanny90 opened this issue Jan 25, 2023 · 8 comments

Comments

@daaanny90
Copy link

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?
@Aashishweb
Copy link

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.
browser preview
browser preview
browser preview
code
code
code

@daaanny90
Copy link
Author

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.

@danomatic
Copy link
Owner

@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

@danomatic
Copy link
Owner

See https://react-pdf.org/styling#valid-units

@daaanny90
Copy link
Author

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

@danomatic
Copy link
Owner

danomatic commented Jan 31, 2023 •
edited
Loading

@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

@harmoney-gaurav
Copy link

Pseudo-elements/classes are not supported by css-select

Error: unmatched pseudo-class :before

just trying to add a custom list-style in

    .

@danomatic
Copy link
Owner

This library now ignores pseudo elements that it can't support. Can this be closed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@danomatic @daaanny90 @harmoney-gaurav @Aashishweb