# Brand Assets

Download and use the official tailwindcss-obfuscator logos for your projects, presentations, and articles.

## Logo Variants

### Horizontal Logo

For headers, documentation, and wide spaces.

<div style="display: flex; gap: 2rem; flex-wrap: wrap; margin: 2rem 0;">
  <div style="padding: 2rem; background: #f8fafc; border-radius: 8px; flex: 1; min-width: 300px;">
    <img src="/images/tailwindcss-obfuscator/logo-horizontal.svg" alt="Logo horizontal (light)" style="max-width: 100%; height: auto;">
    <p style="margin-top: 1rem; font-size: 0.875rem; color: #64748b;">Light background version</p>
  </div>
  <div style="padding: 2rem; background: #0f172a; border-radius: 8px; flex: 1; min-width: 300px;">
    <img src="/images/tailwindcss-obfuscator/logo-horizontal-white.svg" alt="Logo horizontal (dark)" style="max-width: 100%; height: auto;">
    <p style="margin-top: 1rem; font-size: 0.875rem; color: #94a3b8;">Dark background version</p>
  </div>
</div>

### Square Logo

For favicons, app icons, and compact spaces.

<div style="display: flex; gap: 2rem; flex-wrap: wrap; margin: 2rem 0;">
  <div style="padding: 2rem; background: #f8fafc; border-radius: 8px; text-align: center;">
    <img src="/images/tailwindcss-obfuscator/logo-square.svg" alt="Logo square (light)" style="width: 120px; height: auto;">
    <p style="margin-top: 1rem; font-size: 0.875rem; color: #64748b;">Light background version</p>
  </div>
  <div style="padding: 2rem; background: #0f172a; border-radius: 8px; text-align: center;">
    <img src="/images/tailwindcss-obfuscator/logo-square-white.svg" alt="Logo square (dark)" style="width: 120px; height: auto;">
    <p style="margin-top: 1rem; font-size: 0.875rem; color: #94a3b8;">Dark background version</p>
  </div>
</div>

## Download

| Variant    | Light                                                                     | Dark                                                                                  |
| ---------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| Horizontal | [logo-horizontal.svg](/images/tailwindcss-obfuscator/logo-horizontal.svg) | [logo-horizontal-white.svg](/images/tailwindcss-obfuscator/logo-horizontal-white.svg) |
| Square     | [logo-square.svg](/images/tailwindcss-obfuscator/logo-square.svg)         | [logo-square-white.svg](/images/tailwindcss-obfuscator/logo-square-white.svg)         |

## Usage Guidelines

- Use the **light version** on white or light backgrounds
- Use the **dark/white version** on dark backgrounds
- Maintain the aspect ratio when resizing
- Do not alter the colors or proportions
- Provide adequate spacing around the logo

## Logo Elements

The tailwindcss-obfuscator logo consists of:

1. **Tailwind CSS waves** - The iconic cyan wave pattern representing Tailwind CSS
2. **Obfuscation bars** - Three horizontal bars of decreasing width, symbolizing the transformation of readable classes into obfuscated identifiers
3. **Typography** - "Tailwind CSS" + "OBFUSCATOR" in a stacked layout (horizontal version only)

## Colors

| Element                  | Color     | Hex       |
| ------------------------ | --------- | --------- |
| Tailwind waves           | Cyan      | `#38bdf8` |
| Obfuscation bars (light) | Slate 900 | `#0f172a` |
| Obfuscation bars (dark)  | White     | `#ffffff` |
| Text (light)             | Slate 900 | `#0f172a` |
| Text (dark)              | White     | `#ffffff` |