1. Setting Up Tailwind CSS
To use Tailwind, you can either use the CDN (for quick testing) or install it via npm for a full setup.
Using CDN (Quick Setup)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Basic Tailwind Page</title>
<script src=”https://cdn.tailwindcss.com”></script>
</head>
<body class=”bg-gray-100 text-gray-900″>
<div class=”container mx-auto p-4″>
<header class=”bg-blue-500 text-white text-center py-4 rounded-lg”>
<h1 class=”text-2xl font-bold”>Welcome to Tailwind CSS</h1>
</header>
<main class=”mt-6″>
<div class=”bg-white p-6 shadow-lg rounded-lg”>
<h2 class=”text-xl font-semibold”>Why Use Tailwind?</h2>
<p class=”mt-2 text-gray-700″>
Tailwind is a utility-first CSS framework that allows for rapid UI development by using predefined classes.
</p>
</div>
<div class=”mt-6 flex gap-4″>
<button class=”bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md”>
Click Me
</button>
<button class=”bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md”>
Delete
</button>
</div>
</main>
<footer class=”mt-10 text-center text-gray-600″>
© 2024 Tailwind Example
</footer>
</div>
</body>
</html>
1. Container & Spacing
container
: Centers the content.mx-auto
: Centers it horizontally.p-4
: Adds padding (4 units).mt-6
: Adds margin on top.
2. Typography & Colors
text-gray-900
: Dark gray text.text-xl
: Sets font size to extra-large.font-bold
: Makes text bold.
3. Background & Borders
bg-gray-100
: Light gray background.bg-blue-500
: Blue background for the header.rounded-lg
: Rounds the corners.
4. Buttons & Hover Effects
bg-green-500 hover:bg-green-600
: Changes the button color on hover.px-4 py-2
: Adds padding for better spacing.rounded-md
: Rounds the edges of buttons.
3. Installing Tailwind via npm (For Full Setup)
If you want to install Tailwind properly:
Then, add Tailwind to tailwind.config.js
and include it in your CSS.
This basic page gives you a quick start with Tailwind and explains the key concepts! 🚀
1. Layout Components
Grid Layout
A basic grid layout with multiple columns.
Flexbox Layout
Aligning items in a row and centering them.
Spacing
Managing spacing with padding and margin utilities.
2. Text & Typography
Text Color
Applying text colors.
Font Size & Weight
Changing font size and font weight.
Text Alignment & Decoration
Aligning text and adding decorations.
Line Height & Letter Spacing
Control line height and letter spacing.
3. Backgrounds & Borders
Background Color
Setting background colors for elements.
Borders
Styling borders with colors and sizes.
Border Radius
Making rounded corners.
Box Shadow
Adding shadows to elements.
4. Buttons & Forms
Buttons
Creating buttons with hover effects.
Input Fields
Styling input fields.
5. Modals & Popups
Modal
A simple modal with a close button.
6. Tables
Table Layout
Creating a simple table with borders.
7. Cards
Card Component
Creating a simple card component.
Here’s an in-depth explanation of Tailwind CSS transition utilities, with examples for each transition type.
1. transition
(All Properties)
This enables transitions on all properties by default.
Example:
2. transition-none
(No Transitions)
This disables transitions.
Example:
3. transition-colors
(Color Changes)
Applies transitions only to color-related properties like background-color
, color
, border-color
, etc.
Example:
4. transition-opacity
(Opacity)
Applies transition to the opacity
property (useful for fading in/out).
Example:
5. transition-transform
(Transforms)
This applies transitions to transformations like scale
, rotate
, translate
, etc.
Example:
6. transition-shadow
(Shadow)
This applies transitions to box-shadow properties.
Example:
7. transition-all
(All Properties)
This applies transitions to all properties (background-color, text color, transforms, opacity, etc.). It’s like a more generic version that covers multiple properties.
Example:
Duration (duration-xxx
)
The duration
class controls the transition’s time span:
Example:
Available durations:
duration-75
— 75msduration-100
— 100msduration-150
— 150msduration-200
— 200msduration-300
— 300msduration-500
— 500msduration-700
— 700msduration-1000
— 1000ms
Timing Function (ease-xxx
)
Timing functions control how the transition speed progresses over time:
Example:
Available timing functions:
ease-linear
— Constant speed.ease-in
— Starts slow, then speeds up.ease-out
— Starts fast, then slows down.ease-in-out
— Starts slow, speeds up, then slows down.
Delay (delay-xxx
)
The delay
class sets a delay before the transition begins.
Example:
Available delays:
delay-75
— 75ms delay.delay-100
— 100ms delay.delay-150
— 150ms delay.delay-200
— 200ms delay.delay-300
— 300ms delay.
Full Example Using Multiple Transition Utilities:
Summary:
transition-all
: Applies transition on all properties.transition-none
: Disables transition.transition-colors
: Applies to color properties.transition-opacity
: Applies to opacity.transition-transform
: Applies to transforms like scaling, rotating.transition-shadow
: Applies to box-shadow.duration-xxx
: Controls the duration of the transition.ease-xxx
: Controls the speed curve of the transition.delay-xxx
: Controls when the transition starts.
With these utilities, you can create smooth transitions for various elements in your design with Tailwind CSS.