Logoforge
Back

Tailwind CSS logo

Tailwind CSS supplies a utility‑first CSS framework, letting developers compose responsive designs directly in markup without writing custom styles. The Tailwind CSS logo as clean SVG, in brand color and mono. Copy it, download it, or install it as a typed React component.

Tailwind CSS logo
Brand color
#06b6d4
Variants
4 SVG files
Brand guidelines
Read before use
Source
gilbarbara/logos · CC0
Sponsor

Use the Tailwind CSS logo

shadcn CLI
npx shadcn@latest add @logoforge/tailwindcss

Works out of the box — @logoforge is in the official shadcn directory. Prefer your AI editor? Use the MCP server.

React
import { TailwindcssLogo } from "@/components/logos/tailwindcss";

<TailwindcssLogo className="size-8" />
<TailwindcssLogo variant="mono" />          {/* currentColor */}
<TailwindcssLogo type="wordmark" className="h-6 w-auto" />
icon.svg
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 154"><defs><linearGradient id="tailwindcss-a" x1="-2.778%" x2="100%" y1="32%" y2="67.556%"><stop offset="0%" stop-color="#2298bd"/><stop offset="100%" stop-color="#0ed7b5"/></linearGradient></defs><path fill="url(#tailwindcss-a)" d="M128 0Q76.8 0 64 51.2 83.2 25.6 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8q51.2 0 64-51.2-19.2 25.6-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0M64 76.8q-51.2 0-64 51.2 19.2-25.6 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6q51.2 0 64-51.2-19.2 25.6-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8"/></svg>

Download

Related logos

Tailwind CSS and the Tailwind CSS logo are trademarks of their respective owner. Logoforge is not affiliated with or endorsed by Tailwind CSS; the logo is provided to refer to the product. Follow the brand's own guidelines. Own this brand and want it removed? Contact us — handled within 72 hours.