Tailwind Styling

React DOCX maps Tailwind classes to DOCX properties. Not everything works (DOCX isn’t CSS) but the common stuff does.

<Text className="text-2xl font-bold text-blue-600">
  Styled text
</Text>

Text

Colors

<Text className="text-red-500">Red</Text>
<Text className="text-blue-700">Dark blue</Text>
<Text className="text-green">Green (defaults to 500)</Text>

All Tailwind colors work: red, blue, green, yellow, purple, pink, orange, gray, slate, zinc, neutral, stone, amber, lime, emerald, teal, cyan, sky, indigo, violet, fuchsia, rose. Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Formatting

<Text className="font-bold">Bold</Text>
<Text className="italic">Italic</Text>
<Text className="underline">Underline</Text>
<Text className="line-through">Strikethrough</Text>
<Text className="uppercase">ALL CAPS</Text>
<Text className="capitalize">Capitalized Words</Text>
<Text className="lowercase">lowercase</Text>

Word has one bold weight: font-semibold, font-bold, font-extrabold and font-black are bold; font-thin through font-medium turn bold off, so <Text className="font-normal"> inside a heading is not bold. not-italic and no-underline turn those off. uppercase uses Word’s All Caps format, so the underlying text keeps its case. Word has no lowercase or title-case format, so lowercase and capitalize change the text itself.

Sizes

<Text className="text-xs">Extra small</Text>
<Text className="text-sm">Small</Text>
<Text className="text-base">Base</Text>
<Text className="text-lg">Large</Text>
<Text className="text-xl">Extra large</Text>
<Text className="text-2xl">2XL</Text>

Full range: text-xs through text-9xl, following Tailwind’s scale at 1px = 0.75pt: text-xs is 9pt, text-sm 10.5pt, text-base 12pt, text-lg 13.5pt, text-2xl 18pt.

Fonts

<Text className="font-sans">Sans-serif</Text>
<Text className="font-serif">Serif</Text>
<Text className="font-mono">Monospace</Text>

font-sans, font-serif and font-mono map to Arial, Times New Roman and Courier New, fonts Word has on every platform. For font stacks from a custom config, the first concrete font is used; generic names such as sans-serif and system aliases such as ui-sans-serif are skipped because Word cannot resolve them.

Super/subscript

<Paragraph>
  H<Text className="align-sub text-xs">2</Text>O
</Paragraph>

<Paragraph>
  E = mc<Text className="align-super text-xs">2</Text>
</Paragraph>

Letter spacing

<Text className="tracking-tight">Tight</Text>
<Text className="tracking-normal">Normal</Text>
<Text className="tracking-wide">Wide</Text>
<Text className="tracking-widest">Widest</Text>

Paragraphs

Alignment

<Paragraph className="text-left">Left</Paragraph>
<Paragraph className="text-center">Center</Paragraph>
<Paragraph className="text-right">Right</Paragraph>
<Paragraph className="text-justify">Justified</Paragraph>

Spacing

<Paragraph className="mt-4">Margin top</Paragraph>
<Paragraph className="mb-4">Margin bottom</Paragraph>
<Paragraph className="mt-4 mb-2">Both</Paragraph>

Indentation

<Paragraph className="ml-8">Left indent</Paragraph>
<Paragraph className="mr-8">Right indent</Paragraph>
<Paragraph className="indent-4">First line indent</Paragraph>

Line height

<Paragraph className="leading-tight">Tight lines</Paragraph>
<Paragraph className="leading-normal">Normal lines</Paragraph>
<Paragraph className="leading-loose">Loose lines</Paragraph>

Options: leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose.

Background

<Paragraph className="bg-yellow-100">
  Highlighted paragraph
</Paragraph>

Page breaks

Class	Effect
`break-before-page`	Starts the paragraph on a new page
`break-after-avoid`	Keeps the paragraph on the same page as the next one (Word’s “Keep with next”)
`break-inside-avoid`	Keeps the paragraph’s lines together; on table rows and tables, see Table

Headings already keep with the next paragraph or table.

Arbitrary values

Square brackets set values outside the theme:

<Text className="text-[#0B5FFF] text-[14pt]">Exact color and size</Text>
<Paragraph className="mt-[12pt] leading-[1.5] bg-[#FFF7E6]">...</Paragraph>
<Td className="border-[2px] border-[#333]">...</Td>
<Text className="font-['Open_Sans']">Font name (underscores are spaces)</Text>

Lengths accept px, pt, rem, em, cm, mm and in; colors must be hex. leading-[1.5] is a multiple of the line; leading-[18pt] is an exact height.

Inheritance

Classes cascade like CSS:

Inherited: text properties (color, size, font, weight, italic, underline, strikethrough, case, letter spacing, super/subscript), text alignment and line height. A class on Document, Section, Table, Tr, Ul or Li styles the text inside it.
Not inherited: margins, padding, backgrounds and borders apply only to the element that declares them. <Section className="mt-4"> does not add space above every paragraph, and <Table className="border"> draws the table’s borders without adding borders to each cell.

A background on an inline element (Text, Bold, Link, …) shades the text inside it, like a CSS span. A background on Tr shades the row’s cells.

Tables

Borders

<Table className="border">
  <Tbody>
    <Tr>
      <Td className="border">Cell with border</Td>
      <Td className="border-2">Thicker border</Td>
    </Tr>
  </Tbody>
</Table>

Border widths: border, border-0, border-2, border-4, border-8. A border color (border-gray-300) colors the sides that have a width; on its own it draws nothing, as in Tailwind. Individual sides: border-t, border-b, border-l, border-r.

Border colors

<Td className="border border-red-500">Red border</Td>
<Td className="border-b-2 border-blue-700">Blue bottom border</Td>

Padding

<Td className="p-2">All sides</Td>
<Td className="px-4 py-2">Horizontal and vertical</Td>
<Td className="pt-2 pb-4">Top and bottom</Td>
<Td className="pl-2 pr-4">Left and right</Td>

Cell alignment

<Td className="align-top">Top</Td>
<Td className="align-middle">Middle</Td>
<Td className="align-bottom">Bottom</Td>

Background

<Th className="bg-gray-100">Header cell</Th>
<Td className="bg-red-50">Highlighted cell</Td>

Images

Object fit

<Image src={data} width="4in" height="3in" className="object-cover" />
<Image src={data} width="4in" height="3in" className="object-contain" />

Aspect ratio

<Image src={data} width="4in" className="aspect-video" />
<Image src={data} width="4in" className="aspect-square" />
<Image src={data} width="4in" className="aspect-[3/2]" />

Custom config

Drop a tailwind.config.js (or .ts, .mjs, .cjs) in your project root. React DOCX loads it automatically. To vary the theme per document, for example per client, use the Document theme prop.

Custom colors

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
    },
  },
};

<Text className="text-brand-500">Brand color</Text>
<Paragraph className="bg-brand-50">Brand background</Paragraph>

Custom fonts

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        heading: "Georgia",
        code: ["Fira Code", "Consolas", "monospace"],
      },
    },
  },
};

<Text className="font-heading">Georgia text</Text>
<Text className="font-code">Monospace text</Text>

Font must exist on the machine opening the document.

Custom sizes

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontSize: {
        huge: "4rem",
        tiny: "0.5rem",
      },
    },
  },
};

<Text className="text-huge">Big text</Text>
<Text className="text-tiny">Small text</Text>

Supports rem, px, and pt values.

Class merging

Later classes win:

<Text className="text-red-500 text-blue-500">Blue (last wins)</Text>
<Text className="text-sm text-lg">Large (last wins)</Text>

Child classes override parent classes.

What doesn’t work

These have no DOCX equivalent:

opacity-*
z-*
flex, grid, float
shadow-*
rotate-*, scale-*, translate-*
blur-*, brightness-*
bg-gradient-*
rounded-* (except on tables/cells via borders)
w-*, h-* (use component props instead)

Getting started

Components

Text

Colors

Formatting

Sizes

Fonts

Super/subscript

Letter spacing

Paragraphs

Alignment

Spacing

Indentation

Line height

Background

Page breaks

Arbitrary values

Inheritance

Tables

Borders

Border colors

Padding

Cell alignment

Background

Images

Object fit

Aspect ratio

Custom config

Custom colors

Custom fonts

Custom sizes

Class merging

What doesn’t work

​Text

​Colors

​Formatting

​Sizes

​Fonts

​Super/subscript

​Letter spacing

​Paragraphs

​Alignment

​Spacing

​Indentation

​Line height

​Background

​Page breaks

​Arbitrary values

​Inheritance

​Tables

​Borders

​Border colors

​Padding

​Cell alignment

​Background

​Images

​Object fit

​Aspect ratio

​Custom config

​Custom colors

​Custom fonts

​Custom sizes

​Class merging

​What doesn’t work

Text

Colors

Formatting

Sizes

Fonts

Super/subscript

Letter spacing

Paragraphs

Alignment

Spacing

Indentation

Line height

Background

Page breaks

Arbitrary values

Inheritance

Tables

Borders

Border colors

Padding

Cell alignment

Background

Images

Object fit

Aspect ratio

Custom config

Custom colors

Custom fonts

Custom sizes

Class merging

What doesn’t work