Back to Tailwindcss

Page

src/app/(docs)/brand/page.mdx

latest2.8 KB
Original Source

import Image from "next/image"; import tailwindcssLogoMark from "./img/tailwindcss-mark.svg"; import tailwindcssLogoType from "./img/tailwindcss-logotype.svg"; import tailwindcssLogoTypeWhite from "./img/tailwindcss-logotype-white.svg";

export const title = "Brand"; export const description = "Tailwind CSS brand assets and usage guidelines.";

Trademark usage agreement

The Tailwind name and logos are trademarks of Tailwind Labs Inc.

You may not use the Tailwind name or logos in any way that could mistakenly imply any official connection with or endorsement of Tailwind Labs Inc. Any use of the Tailwind name or logos in a manner that could cause customer confusion is not permitted.

This includes naming a product or service in a way that emphasizes the Tailwind brand, like "Tailwind Themes" or "Tailwind Studio", as well as in domain names like "tailwindkits.com".

Instead, you must use your own brand name in a way that clearly distinguishes it from Tailwind CSS. Examples that are permitted include "ComponentStudio for Tailwind CSS" or "UtilityThemes: Templates for Tailwind CSS".

Additionally, you may not use our trademarks for t-shirts, stickers, or other merchandise without explicit written consent.

Assets

These assets are provided for use in situations like articles and video tutorials. They should not be used in any way that could be confusing for customers or imply any affiliation with Tailwind Labs Inc.

Mark

<div className="pt-5 pb-8"> <a href={tailwindcssLogoMark.src} download> <span className="sr-only">Download mark</span> <div className="max-w-xl"> <div className="relative" style={{ paddingTop: `${(33 / 262) * 100}%` }}> <Image className="absolute inset-0 h-full w-full object-contain object-left" src={tailwindcssLogoMark} alt="" width={54} height={33} style={{ margin: 0 }} /> </div> </div> </a> </div> <a href={tailwindcssLogoMark.src} download> Download mark </a>

Logotype

<div className="pt-5 pb-8"> <a href={tailwindcssLogoType.src} download> <span className="sr-only">Download logotype</span> <div className="max-w-xl"> <div className="relative" style={{ paddingTop: `${(33 / 262) * 100}%` }}> <Image className="absolute inset-0 block h-full w-full dark:hidden" src={tailwindcssLogoType} alt="" width={262} height={33} style={{ margin: 0 }} /> <Image className="absolute inset-0 hidden h-full w-full dark:block" src={tailwindcssLogoTypeWhite} alt="" width={262} height={33} style={{ margin: 0 }} /> </div> </div> </a> </div> <a href="/brand/tailwindcss-logotype.zip" download> Download logotype </a>