Skip to main content
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">Small Caps</Text>

​
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.

​
Fonts

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

​
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>

​
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. 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>

​
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.

​
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)