> ## Documentation Index
> Fetch the complete documentation index at: https://react-docx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tailwind Styling

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

```tsx theme={"dark"}
<Text className="text-2xl font-bold text-blue-600">
  Styled text
</Text>
```

***

## Text

### Colors

```tsx theme={"dark"}
<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

```tsx theme={"dark"}
<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="lowercase">lowercase</Text>
<Text className="capitalize">Small Caps</Text>
```

### Sizes

```tsx theme={"dark"}
<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

```tsx theme={"dark"}
<Text className="font-sans">Sans-serif</Text>
<Text className="font-serif">Serif</Text>
<Text className="font-mono">Monospace</Text>
```

### Font weight

```tsx theme={"dark"}
<Text className="font-thin">Thin</Text>
<Text className="font-extralight">Extra light</Text>
<Text className="font-light">Light</Text>
<Text className="font-normal">Normal</Text>
<Text className="font-medium">Medium</Text>
<Text className="font-semibold">Semibold</Text>
<Text className="font-bold">Bold</Text>
<Text className="font-extrabold">Extra bold</Text>
<Text className="font-black">Black</Text>
```

Full range: `font-thin`, `font-extralight`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black`.

### Super/subscript

```tsx theme={"dark"}
<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

```tsx theme={"dark"}
<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

```tsx theme={"dark"}
<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

```tsx theme={"dark"}
<Paragraph className="mt-4">Margin top</Paragraph>
<Paragraph className="mb-4">Margin bottom</Paragraph>
<Paragraph className="mt-4 mb-2">Both</Paragraph>
```

### Indentation

```tsx theme={"dark"}
<Paragraph className="ml-8">Left indent</Paragraph>
<Paragraph className="mr-8">Right indent</Paragraph>
<Paragraph className="indent-4">First line indent</Paragraph>
```

### Line height

```tsx theme={"dark"}
<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

```tsx theme={"dark"}
<Paragraph className="bg-yellow-100">
  Highlighted paragraph
</Paragraph>
```

***

## Tables

### Borders

```tsx theme={"dark"}
<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

```tsx theme={"dark"}
<Td className="border border-red-500">Red border</Td>
<Td className="border-b-2 border-blue-700">Blue bottom border</Td>
```

### Border styles

```tsx theme={"dark"}
<Td className="border border-solid">Solid (default)</Td>
<Td className="border border-dashed">Dashed</Td>
<Td className="border border-dotted">Dotted</Td>
<Td className="border border-double">Double</Td>
<Td className="border-none">No border</Td>
```

Per-side styles:

```tsx theme={"dark"}
<Td className="border-b border-b-dashed">Dashed bottom</Td>
<Td className="border-t border-t-dotted">Dotted top</Td>
```

### Padding

```tsx theme={"dark"}
<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

```tsx theme={"dark"}
<Td className="align-top">Top</Td>
<Td className="align-middle">Middle</Td>
<Td className="align-bottom">Bottom</Td>
```

### Background

```tsx theme={"dark"}
<Th className="bg-gray-100">Header cell</Th>
<Td className="bg-red-50">Highlighted cell</Td>
```

***

## Images

### Object fit

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

### Aspect ratio

```tsx theme={"dark"}
<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

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

```tsx theme={"dark"}
<Text className="text-brand-500">Brand color</Text>
<Paragraph className="bg-brand-50">Brand background</Paragraph>
```

### Custom fonts

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

```tsx theme={"dark"}
<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

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

```tsx theme={"dark"}
<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:

```tsx theme={"dark"}
<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.

***

## Arbitrary values

Use bracket syntax for values not in the default scale:

```tsx theme={"dark"}
<Text className="text-[14px]">Custom size</Text>
<Text className="text-[#FF6600]">Custom color</Text>
<Paragraph className="mt-[20px]">Custom margin</Paragraph>
<Paragraph className="bg-[#F5F5F5]">Custom background</Paragraph>
<Td className="p-[10pt]">Custom padding</Td>
```

Supported units in arbitrary values: `px`, `pt`.

***

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