Guias

Tailwind suportado

As mesmas classes que já conheces, com as medidas da web: 1 px = 0,75 pt, e uma A4 tem 794 px de largura.

	Classes
Espaço	p-* px-* py-* pt-* pb-* pl-* pr-* mt-* mb-* ml-* mr-* mx-* my-* gap-* ml-auto
Texto	text-xs…6xl text-[11px] font-normal font-semibold font-bold font-display uppercase tracking-* leading-* text-left text-center text-right
Cor	paleta do Tailwind, cores do config, text-[#hex] bg-[#hex] border-[#hex]
Bordas	border border-2 border-[0.5px] border-t/b/l/r-* rounded-*
Disposição	flex-1 flex-[2] items-* justify-* w-1/2 w-full w-[200px] h-*
Variantes	even: (linhas alternadas da tabela)

O que não existe num PDF#

Estas classes dão erro, com o motivo, em vez de serem ignoradas sem aviso:

hover:, focus: - num PDF não há interacção.
md:, lg:, dark: - a página tem sempre o mesmo tamanho e o mesmo tema.
shadow-*, blur-*, opacity-*, degradês e transformações.
grid, absolute, space-* - usa Row, Column e gap-*.

Cores e letras#

As cores do config usam-se como no Tailwind (text-brand, bg-brand-light). As letras definem-se em fontFamily.sans (corpo) e fontFamily.display (font-display).

config

const config = {
  theme: {
    extend: {
      colors: { background: "#FFFFFF", foreground: "#111827", brand: "#0E4C63" },
      fontFamily: { sans: ["Inter"], display: ["Playfair Display"] },
    },
  },
}

background e foreground são o fundo da página e a cor do texto principal: é com eles que o contraste do texto fiscal é verificado.

Estilos em objecto#

Todos os componentes aceitam style, em pt, como no react-pdf: style={{ fontSize: 9, color: "#52525B" }}.

AnteriorVer ao vivo Seguinte Os dados do documento