xxxxxxxxxx
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
xxxxxxxxxx
Tailwind is designed to be component friendly. It is so much easier
to separate a site's elements into smaller components and not pollute
the codebase with objects or extraneous CSS classes. Furthermore,
every class is inlined in the component, making it much easier to read and
understand.
xxxxxxxxxx
<link href="https://unpkg.com/tailwindcss@2.2.4/dist/tailwind.min.css" rel="stylesheet">
xxxxxxxxxx
CDN script = <script src="https://cdn.tailwindcss.com"></script>
npm command = npm install -D tailwindcss && npx tailwindcss init
tailwind Installation Page = https://tailwindcss.com/docs/installation
xxxxxxxxxx
// dont forget to read the documentation
//For Tailwind CLI
npm install -D tailwindcss
npx tailwindcss init
//Tailwind for PostCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
//Tail wind for React
npx create-react-app my-project
cd my-project
//Dont forget to read the documentation
xxxxxxxxxx
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
<div class="prose">
<!-- ... -->
</div>
</body>
</html>
xxxxxxxxxx
<figure class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
<img class="w-24 h-24 rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 space-y-4">
<blockquote>
<p class="text-lg font-medium">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption class>
<div>
Sarah Dayan
</div>
<div>
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>