what is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework for rapidly building custom UIs. It is highly focused on a mobile-first approach like Bootstrap. It's a customizable and low-level CSS framework that provides all the building blocks to create designs without any styles.
Advantages
We can customize the designs to make the components. the changes in the desired manner.
Getting Started
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles, and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero runtime.
Add tailwind Play CDN.
- Add the play CDN script tag to the head of your HTML file.
<script src="https://cdn.tailwindcss.com"></script>
- 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>
- 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>
Utility-First Fundamentals
Tailwind’s flexbox and padding utilities
(flex, shrink-0, and p-6)to control the overall card layoutThe max-width and margin utilities
(max-w-sm and mx-auto)to constrain the card width and center it horizontallyThe background color, border-radius, and box-shadow utilities
(bg-white, rounded-xl, and shadow-lg)to style the card’s appearanceThe width and height utilities
(w-12 and h-12)to size the logo imageThe space-between utilities `(space-x-4) to handle the spacing between the logo and the text
The font size, text color, and font-weight utilities
(text-xl, text-black, font-medium, etc.)to style the card text
<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>
Handling Hover, Focus, and other States.
includes modifiers for just about everything you’ll ever need, including:
Pseudo-classes, like
:hover, :focus, :first-child,and :required.Pseudo-elements, like
::before, ::after, ::placeholder, and::selection.Media queries, like responsive breakpoints, dark mode, and prefers-reduced-motion
Attribute selectors,
like [dir="rtl"].
### hover, focus, active
<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ...">
Save changes
</button>
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>
before
<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
When you look
<span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
<span class="relative text-white">annoyed</span>
</span>
all the time, people think that you're busy.
</blockquote>
Responsive Design
You can completely customize your breakpoints in your tailwind.config.js file:
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}