DekGenius.com
CSS
tailwind css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" />
tailwind css
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.
TAilwind css
/* TailwindCSS is a CSS framework. It helps reduce the code you write.*/
tailwind css
// 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
tailwind css
<script src="https://cdn.tailwindcss.com"></script>
tailwind css
// Tailwind npm
> npm install -D tailwindcss
> npx tailwindcss init
// Tailwind PostCSS
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init
// or by link bootstrap
<script src="https://cdn.tailwindcss.com"></script>
// Happy coding :)
Tailwind css
<!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>
Tailwind CSS
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
tailwind css
<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>
tailwind css
<div class="flex font-sans">
<div class="flex-none w-52 relative">
<img src="/classic-utility-jacket.jpg" alt="" class="absolute inset-2 w-full h-full object-cover" loading="lazy" />
</div>
<form class="flex-auto p-6">
<div class="flex flex-wrap">
<h1 class="flex-auto text-lg font-semibold text-slate-900">
Classic Utility Jacket
</h1>
<div class="text-lg font-semibold text-slate-500">
$110.00
</div>
<div class="w-full flex-none text-sm font-medium text-slate-700 mt-2">
In stock
</div>
</div>
<div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
<div class="space-x-2 flex text-sm">
<label>
<input class="sr-only peer" name="size" type="radio" value="xs" checked />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
XS
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="s" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
S
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="m" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
M
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="l" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
L
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="xl" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
XL
</div>
</label>
</div>
</div>
<div class="flex space-x-4 mb-6 text-sm font-medium">
<div class="flex-auto flex space-x-4">
<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
Buy now
</button>
<button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900" type="button">
Add to bag
</button>
</div>
<button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200" type="button" aria-label="Like">
<svg width="20" height="20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
</svg>
</button>
</div>
<p class="text-sm text-slate-700">
Free shipping on all continental US orders.
</p>
</form>
</div>
tailwind css
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
tailwind css
<link href="https://unpkg.com/tailwindcss@2.2.4/dist/tailwind.min.css" rel="stylesheet">
tailwind css
It's an css framework which is used in Apple, Tesla etc
tailwind css
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.
© 2022 Copyright:
DekGenius.com