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

# TextStyle

> Add inline styling to text with the TextStyle mark.

The TextStyle extension provides a foundation for applying inline styles to text. It's required by other extensions like Color, FontFamily, and FontSize. This extension renders as a `<span>` element with inline styles.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/extension-text-style
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/extension-text-style
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/extension-text-style
  ```
</CodeGroup>

## Usage

```typescript theme={null}
import { Editor } from '@tiptap/core'
import TextStyle from '@tiptap/extension-text-style'

const editor = new Editor({
  extensions: [
    TextStyle,
  ],
})
```

## Configuration Options

<ParamField path="HTMLAttributes" type="Record<string, any>" default="{}">
  HTML attributes to add to the span element.

  ```typescript theme={null}
  TextStyle.configure({
    HTMLAttributes: {
      class: 'my-text-style',
    },
  })
  ```
</ParamField>

<ParamField path="mergeNestedSpanStyles" type="boolean" default="true">
  When enabled, merges the styles of nested spans into the child span during HTML parsing. This prioritizes the style of the child span and is used when parsing content created in other editors.

  ```typescript theme={null}
  TextStyle.configure({
    mergeNestedSpanStyles: false,
  })
  ```
</ParamField>

## Commands

### toggleTextStyle(attributes?)

Toggle a text style with the specified attributes.

```typescript theme={null}
editor.commands.toggleTextStyle({ fontWeight: 'bold' })
```

### removeEmptyTextStyle()

Remove spans without inline style attributes.

```typescript theme={null}
editor.commands.removeEmptyTextStyle()
```

## Usage with Other Extensions

The TextStyle extension is typically used as a foundation for other styling extensions:

```typescript theme={null}
import { Editor } from '@tiptap/core'
import TextStyle from '@tiptap/extension-text-style'
import { Color } from '@tiptap/extension-color'
import { FontFamily } from '@tiptap/extension-font-family'

const editor = new Editor({
  extensions: [
    TextStyle,
    Color,
    FontFamily,
  ],
})

// These extensions rely on TextStyle
editor.commands.setColor('#ff0000')
editor.commands.setFontFamily('Comic Sans MS')
```

## Technical Details

* **Priority**: 101 (higher than most other marks to ensure proper style application)
* **HTML Element**: Renders as `<span>` with inline styles
* **Parsing**: Only parses `<span>` elements that have a `style` attribute
* **Nested Spans**: By default, merges styles from nested spans up to 20 levels deep

## Source Code

View the source code on GitHub:

* [packages/extension-text-style](https://github.com/ueberdosis/tiptap/tree/main/packages/extension-text-style)