install tailwind code example

Example 1: tailwindcss cdn

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Example 2: tailwind via cdn

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Example 3: install tailwind

# If you're on Next.js v10
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# Or
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Example 4: tailwind cdn

<!-- 27kb compressed, 348kb raw -->

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Example 5: tailwind css npm

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

Example 6: tailwind

.card-black {
		@apply card bg-black border-gray-400 text-gray-500;
	}
	.card-blue {
		@apply card bg-blue-200 border-blue-400 text-blue-700;
	}
	.card-gray {
		@apply card bg-gray-200 border-gray-400 text-gray-700;
	}
	.card-green {
		@apply card bg-green-200 border-green-400 text-green-700;
	}
	.card-indigo {
		@apply card bg-indigo-200 border-indigo-400 text-indigo-700;
	}
	.card-orange {
		@apply card bg-orange-200 border-orange-400 text-orange-700;
	}
	.card-pink {
		@apply card bg-pink-200 border-pink-400 text-pink-700;
	}
	.card-purple {
		@apply card bg-purple-200 border-purple-400 text-purple-700;
	}
	.card-red {
		@apply card bg-red-200 border-red-400 text-red-700;
	}
	.card-teal {
		@apply card bg-teal-200 border-teal-400 text-teal-700;
	}
	.card-transparent {
		@apply card  bg-transparent  border-gray-400 text-gray-600;
	}
	.card-white {
		@apply card bg-white border-gray-400 text-gray-700;
	}
	.card-yellow {
		@apply card bg-yellow-200 border-yellow-400 text-yellow-700;
	}