<figure class="md:flbg-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 text-center 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="font-medium">
<div class="text-sky-500 dark:text-sky-400">
Sarah Dayan
</div>
<div class="text-slate-700 dark:text-slate-500">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>npx tailwindcss init
//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
//tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
<div class="space-y-4">
<div class="w-96 bg-white shadow rounded">
w-96
</div>
<div class="w-80 l-50 bg-white shadow rounded">
w-80
</div>
<div class="w-72 bg-white shadow rounded">
w-72
</div>
<div class="w-64 bg-white shadow rounded">
w-64
</div>
<div class="w-60 bg-white shadow rounded">
w-60
</div>
<div class="w-56 bg-white shadow rounded">
w-56
</div>
<div class="w-52 bg-white shadow rounded">
w-52
</div>
<div class="w-48 bg-white shadow rounded">
w-48
</div>
</div>// source/_assets/sass/main.scss
@tailwind preflight;
@tailwind components;
// Code syntax highlighting,
// powered by https://highlightjs.org
@import '~highlight.js/styles/a11y-light.css';
@import 'base';
@import 'navigation';
@import 'documentation';
@tailwind utilities;<ul class="space-y-4">
<li> <div class="w-64 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-56 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-48 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-40 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-32 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-24 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-20 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-16 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-12 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-10 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
</ul>npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html"