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.
- Brand color
- #06b6d4
- Categories
- FrameworksDesignUI & CSS
- Variants
- 4 SVG files
- Website
- tailwindcss.com
- Brand guidelines
- Read before use
- Source
- gilbarbara/logos · CC0
Use the Tailwind CSS logo
shadcn CLI
npx shadcn@latest add @logoforge/tailwindcssWorks 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.