What is tailwind css?
Tailwind CSS is a utility-first CSS framework for rapidly building custom UIs. It is highly focused on mobile-first approach like Bootstrap. It is customizable and low-level css framework that provides all building blocks to create designs without any styles.
The main benifit of tailwind is it doesn't require any stylesheet file to design UI. We have to include tailwind CDN in order to build website quickly. we don't need to create style and link it to html because it provides pre-defined classes that we have to use in our HTML to build a web page. Tailwind simply take a 'raw' css file, process it over the config file and produces an output file.
Why need tailwind css ?
For faster UI building process.
It is utility based framework so we can use utility classes to build custom designs without writing a single line of css.
Advantages of Tailwind CSS
Responsive website becomes very easily.
Minimum lines of code in css file.
we don't have to write css anymore.
we can customize the designs to make components.
Installation
We can use CDN to try Tailwind right in the browser without any build step. The CDN is designed for development purposes only, and is not the best choice for production. It is one of the method to use tailwind.
- Add the Play CDN script to your HTML
Add the Play CDN script tag to the of your HTML file, and start using Tailwind’s utility classes to style your content.
<script src="https://cdn.tailwindcss.com"></script>
2.Try customizing your config
Edit the
tailwind.configobject to customize your configuration with your own design tokens.
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
3.Try adding some custom CSS
Use
type="text/tailwindcss"to add custom CSS that supports all of Tailwind's CSS features.
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
<body>
<div class="lg:content-auto">
<!-- ... -->
</div>
</body>
4.Try using a first-party plugin
Enable first-party plugins, like forms and typography, using the plugins query parameter.
<!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>
Utility-First Fundamentals
Using utility classes to build custom designs without writing CSS
We can style elements by applying pre-existing classes directly in our HTML file and start using Tailwind's utility classes to style content.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-slate-500">You have a new message!</p>
</div>
</div>
In the above example, we have used:
- flexbox
- padding
- margin
- max-width
- background-color
- border-radius
- box-shadow
- width
- height
- space-between
- font-size, text color, and font-weight
Handling Hover, Focus, Active and Other States
Using utilities to style elements on hover, focus, and more.
:hover
<button class="bg-sky-500 hover:bg-sky-700 ...">
Save changes
</button>
:focus
<input class="border-gray-300 focus:border-blue-400..."/>
:active
- Style an element when it is being pressed using the active modifier:
<button class="bg-blue-500 active:bg-blue-600 ...">
Submit
</button>
:visited
- Style a link when it has already been visited using the visited modifier:
<a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ...">
Inspiration
</a>
target (:target)
- Style an element if its ID matches the current URL fragment using the target modifier:
<div id="about" class="target:shadow-lg ...">
<!-- ... -->
</div>
:first-child
- It Style an element if it’s the first child using the first modifier:
<ul>
{#each people as person}
<li class="py-4 first:pt-0 ...">
<!-- ... -->
</li>
{/each}
</ul>
:required
Style an input when it’s required using the required modifier:
<input class="required:border-red-500 ..." />
::before
<div class="before:content-[''] before:block ...">
<!-- ... -->
</div>
::after
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
Email
</span>
<input type="email" name="email" class="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
</label>
:placeholder-shown
<input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />
Responsive Design
Using responsive utility variants to build adaptive user interfaces.%[Link]
There are five breakpoints by default, inspired by common device resolutions:
Breakpoint prefix: Minimum width
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
Flex
Utilities for controlling how flex items both grow and shrink.
Initial
Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:
<div class="flex">
<div class="flex-none w-14 h-14">
01
</div>
<div class="flex-initial w-64 ...">
02
</div>
<div class="flex-initial w-32 ...">
03
</div>
</div>
Flex 1
Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:
<div class="flex">
<div class="flex-none ...">
01
</div>
<div class="flex-1 w-64 ...">
02
</div>
<div class="flex-1 w-32 ...">
03
</div>
</div>
Auto
Use flex-auto to allow a flex item to grow and shrink, taking into account its initial size:
<div class="flex ...">
<div class="flex-none ...">
01
</div>
<div class="flex-auto w-64 ...">
02
</div>
<div class="flex-auto w-32 ...">
03
</div>
</div>
None
Use flex-none to prevent a flex item from growing or shrinking:
<div class="flex ...">
<div class="flex-none w-14 h-14 ...">
01
</div>
<div class="flex-none ...">
02
</div>
<div class="flex-1 ...">
03
</div>
</div>