tailwindcss-plugins

# Tailwind CSS Plugins

## Official Plugins

### @tailwindcss/typography

Beautiful typographic defaults for content you don't control (Markdown, CMS content).

#### Installation

```bash
npm install -D @tailwindcss/typography
```

```css
@import "tailwindcss";
@plugin "@tailwindcss/typography";
```

#### Basic Usage

```html
<article class="prose">
  <h1>Article Title</h1>
  <p>This content gets beautiful default styles...</p>
</article>
```

#### Size Modifiers

| Class | Description |
|-------|-------------|
| `prose-sm` | Smaller text (14px base) |
| `prose` | Default (16px base) |
| `prose-lg` | Larger text (18px base) |
| `prose-xl` | Extra large (20px base) |
| `prose-2xl` | Huge (24px base) |

```html
<article class="prose md:prose-lg lg:prose-xl">
  <!-- Responsive sizing -->
</article>
```

#### Color Themes

```html
<article class="prose prose-slate">Gray theme</article>
<article class="prose prose-zinc">Zinc theme</article>
<article class="prose prose-neutral">Neutral theme</article>
<article class="prose prose-stone">Stone theme</article>
```

#### Dark Mode

```html
<article class="prose dark:prose-invert">
  <!-- Automatically inverts for dark mode -->
</article>
```

#### Element Modifiers

Override specific elements:

```html
<article class="
  prose
  prose-headings:text-blue-600
  prose-a:text-blue-500
  prose-a:no-underline
  prose-code:text-pink-500
  prose-img:rounded-lg
  prose-strong:text-gray-900
  prose-blockquote:border-blue-500
">
  Content
</article>
```

#### Max Width Control

```html
<!-- Remove max-width constraint -->
<article class="prose max-w-none">
  Full width content
</article>
```

#### Escaping Prose Styles

```html
<article class="prose">
  <h1>Styled heading</h1>
  <p>Styled paragraph</p>

  <div class="not-prose">
    <!-- This div and its children escape prose styles -->
    <CustomComponent />
  </div>

  <p>Back to prose styles</p>
</article>
```

#### Custom Class Name

```css
@plugin "@tailwindcss/typography" {
  cla