font weight is not applied ?

[MarinosTBH]

Not any font weight is working here, font-thin font-weight: 100; font-extralight font-weight: 200; font-light font-weight: 300; font-normal font-weight: 400; font-medium font-weight: 500; font-semibold font-weight: 600; font-bold font-weight: 700; font-extrabold font-weight: 800; font-black font-weight: 900; Any one faced this problem ? i'm using the PDFViewer from react pdf and want to show the document with its styles always : This is the basic file ::

import { Page, View, Document, PDFViewer } from '@react-pdf/renderer';
import { createTw } from 'react-pdf-tailwind';
import Header from './CreditNoteDocument/Header';
import { useTranslation } from 'next-i18next';
import SubHeader from './CreditNoteDocument/SubHeader';

// Define styles in tailwind
const tw = createTw({
  theme: {
    fontFamily: {
      sans: ['Helvetica', 'Oswald', 'Inter'],
      helvetica: 'Helvetica'
    },
    fontWeight: {
      semibold: 'helvetica-600',
      bold: '700',
    },
    extend: {
      colors: {
        'light-red': '#B8B8B8',
        custom: '#bada55',
      },
    },
  },
});

// Document template
const DocumentTemplate = ({ tw, config, t }) => (
  <Document>
    <Page size="A4" style={tw('font-helvetica')}>
      <View style={tw('flex flex-col w-full h-full bg-white-basic relative')}>
        <Header tw={tw} config={config} t={t} />
        <SubHeader tw={tw} config={config} t={t} />

      </View>
    </Page>
  </Document>
);

// Main component
const CreditNoteDocument = ({ config }) => {
  const { t } = useTranslation();
  return (
    <div>
      <PDFViewer width="100%" height={720}>
        <DocumentTemplate tw={tw} config={config} t={t} />
      </PDFViewer>
    </div>
  );
};

export default CreditNoteDocument;

[MarinosTBH]

If i add these lines :

const DocumentTemplate = ({ tw, config, t }) => (
  <Document>
    <Page size="A4" style={tw('font-helvetica')}>
      <View style={tw('flex flex-col w-full h-full bg-white-basic relative')}>
        <Header tw={tw} config={config} t={t} />
        <SubHeader tw={tw} config={config} t={t} />
        <Text style={tw('font-semibold')}>
          This is a semibold sentence
        </Text>
        <Text style={tw('font-bold')}>
          This is a bold sentence
        </Text>
        <Text style={tw('font-thin')}>
          This is a thin sentence
        </Text>
      </View>
    </Page>
  </Document>
);

Still does not work

[coren-frankel]

Hey @MarinosTBH, as with #22, see if the React-pdf Font module can help you.

I can confirm I have had the same issue attempting to use/configure fontWeight with tailwind.

Edit: As I'm digging through what I thought was a solution using the react-pdf stylesheet with out of the box fonts, I'm finding that this issue could very well be stemming from that package. See diegomura/react-pdf/issues#2730 and the many issues referenced there.

@aanckar is there another solution to find here? If there is no path forward for fontWeight via tailwind in this package, I propose an update to the README to steer folks towards the Font module (or at least explaining the persisting issue).

[braginteractive]

Anyone get font weights working?

[MarinosTBH]

Anyone get font weights working?

Still, i used the available fonts for now but i will work through it in couple days.

[braginteractive]

Still, i used the available fonts for now but i will work through it in couple days.

You have the font weights working with the available fonts? I wasnt able to get them to work with the available fonts either.