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.
Light background version
Dark background version
Square Logo ​
For favicons, app icons, and compact spaces.
Light background version
Dark background version
Download ​
| Variant | Light | Dark |
|---|---|---|
| Horizontal | logo-horizontal.svg | logo-horizontal-white.svg |
| Square | logo-square.svg | 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:
- Tailwind CSS waves - The iconic cyan wave pattern representing Tailwind CSS
- Obfuscation bars - Three horizontal bars of decreasing width, symbolizing the transformation of readable classes into obfuscated identifiers
- 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 |