Layout
<div class="container mx-auto">
<div class="flex">
<div class="flex-1">Item 1</div>
<div class="flex-1">Item 2</div>
</div>
</div>
Flexbox
<div class="flex items-center justify-center h-screen">
<div class="flex flex-col items-center">
<div class="mb-4">Item 1</div>
<div class="mb-4">Item 2</div>
</div>
</div>
Spacing
<div class="p-4 m-4 bg-gray-200">
<p class="mb-4">This is a paragraph with margin and padding.</p>
</div>
Typography
<h1 class="text-3xl font-bold underline">
Hello, Tailwind CSS!
</h1>
<p class="text-gray-700 leading-relaxed">
This is a paragraph with gray text and relaxed line height.
</p>
Backgrounds
<div class="bg-blue-500 text-white p-4">
This div has a blue background and white text.
</div>
<div class="bg-gradient-to-r from-green-400 to-blue-500 p-4">
This div has a gradient background.
</div>
Borders
<div class="border border-red-500 rounded-lg p-4">
This div has a red border and rounded corners.
</div>
Effects
<div class="shadow-lg p-4">
This div has a large shadow.
</div>
<div class="opacity-75">
This div is 75% opaque.
</div>
Tables
<table class="table-auto w-full">
<thead>
<tr>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2">John</td>
<td class="border px-4 py-2">30</td>
</tr>
<tr>
<td class="border px-4 py-2">Jane</td>
<td class="border px-4 py-2">25</td>
</tr>
</tbody>
</table>
Transitions and Animations
<button class="transition duration-500 ease-in-out bg-blue-500 hover:bg-red-500
transform hover:-translate-y-1 hover:scale-110">
Hover me
</button>
Interactivity
<div class="cursor-pointer p-4">
This div has a pointer cursor.
</div>
<div class="resize resize-x overflow-auto p-4 border">
This div can be resized horizontally.
</div>
SVG
<svg class="w-6 h-6 fill-current text-red-500">
<path d="M3.172 3.172a4 4 0 015.656 0L12 6.343l3.172-3.171a4 4 0 115.656
5.656L17.656 12l3.172 3.172a4 4 0 11-5.656 5.656L12 17.656l-3.172 3.172a4
4 0 01-5.656-5.656L6.343 12 3.172 8.828a4 4 0 010-5.656z"/>
</svg>
Accessibility
<div class="sr-only">
This content is only visible to screen readers.
</div>
<div class="not-sr-only">
This content is visible to everyone.
</div>
Flexbox (Advanced)
<div class="flex flex-wrap">
<div class="w-1/2 p-4 bg-blue-200">Item 1</div>
<div class="w-1/2 p-4 bg-blue-300">Item 2</div>
<div class="w-full p-4 bg-blue-400">Item 3</div>
</div>
Grid
<div class="grid grid-cols-3 gap-4">
<div class="bg-red-200 p-4">Grid Item 1</div>
<div class="bg-red-300 p-4">Grid Item 2</div>
<div class="bg-red-400 p-4">Grid Item 3</div>
</div>
Sizing (Advanced)
<div class="w-64 h-32 bg-green-200">Width 64, Height 32</div>
<div class="min-w-full bg-green-300">Minimum Width Full</div>
<div class="max-w-xs bg-green-400">Maximum Width XS</div>
Colors
<div class="text-blue-500">Blue Text</div>
<div class="bg-yellow-200">Yellow Background</div>
<div class="border-green-500">Green Border</div>
Responsive Design
<div class="bg-red-200 p-4 sm:bg-yellow-200 md:bg-green-200 lg:bg-blue-200
xl:bg-purple-200">
Responsive Background Color
</div>
Typography (Advanced)
<p class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
Responsive Text Size
</p>
<p class="font-light sm:font-normal md:font-medium lg:font-semibold xl:font-bold">
Responsive Font Weight
</p>
Backgrounds (Advanced)
<div class="bg-gradient-to-r from-teal-400 to-blue-500">
Gradient Background
</div>
<div class="bg-fixed bg-center bg-cover" style="background-image:
url('https://example.com/image.jpg');">
Fixed Background Image
</div>
Borders (Advanced)
<div class="border-2 border-dashed border-red-500 p-4">
Dashed Red Border
</div>
<div class="rounded-full bg-gray-300 p-4">
Fully Rounded Corners
</div>
Effects (Advanced)
<div class="shadow-2xl p-4">
2xl Shadow
</div>
<div class="opacity-50 bg-blue-500 p-4">
50% Opacity
</div>
Transitions and Animations (Advanced)
<button class="transition transform hover:rotate-45 duration-300">
Rotate on Hover
</button>
<div class="animate-spin h-8 w-8 bg-blue-500">
Spinning Animation
</div>
Interactivity (Advanced)
<div class="cursor-not-allowed bg-gray-200 p-4">
Not Allowed Cursor
</div>
<div class="pointer-events-none bg-gray-200 p-4">
No Pointer Events
</div>
Accessibility (Advanced)
<div class="sr-only focus:not-sr-only">
Only visible when focused
</div>
Customizing Tailwind (using configuration)
Tailwind allows you to customize your own utility classes using a configuration
file (tailwind.config.js). Here is a basic example of customizing colors:
js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
customColor: '#ff5733',
},
},
},
};
And using the custom color in HTML:
<div class="bg-customColor text-white p-4">
Custom Color Background
</div>
here are more examples demonstrating additional utility
classes and advanced use cases in Tailwind CSS:
Layout (Advanced)
<div class="relative">
<div class="absolute top-0 left-0 p-4 bg-red-200">Absolute Positioned</div>
<div class="absolute top-0 right-0 p-4 bg-red-300">Absolute Positioned</div>
<div class="absolute bottom-0 left-0 p-4 bg-red-400">Absolute Positioned</div>
<div class="absolute bottom-0 right-0 p-4 bg-red-500">Absolute Positioned</div>
</div>
Flexbox (Align and Justify)
<div class="flex items-center justify-between p-4 bg-gray-200">
<div class="bg-blue-300 p-4">Start</div>
<div class="bg-blue-400 p-4">Center</div>
<div class="bg-blue-500 p-4">End</div>
</div>
Grid (Advanced)
<div class="grid grid-cols-4 gap-4 p-4 bg-gray-200">
<div class="col-span-2 bg-yellow-200 p-4">Span 2</div>
<div class="col-span-1 bg-yellow-300 p-4">Span 1</div>
<div class="col-span-1 bg-yellow-400 p-4">Span 1</div>
</div>
Responsive Design (Advanced)
<div class="bg-red-200 p-4 sm:bg-yellow-200 md:bg-green-200 lg:bg-blue-200
xl:bg-purple-200 2xl:bg-pink-200">
Responsive Background Color (2xl included)
</div>
Spacing (Advanced)
<div class="p-2 md:p-4 lg:p-6 xl:p-8 2xl:p-10 bg-gray-300">
Responsive Padding
</div>
<div class="m-2 md:m-4 lg:m-6 xl:m-8 2xl:m-10 bg-gray-400">
Responsive Margin
</div>
Typography (Advanced)
<h1 class="text-4xl font-extrabold text-gray-900 leading-tight sm:text-5xl
md:text-6xl lg:text-7xl xl:text-8xl">
Responsive Heading
</h1>
<p class="text-gray-700 tracking-tight sm:tracking-normal md:tracking-wide
lg:tracking-wider xl:tracking-widest">
Responsive Tracking
</p>
Backgrounds (Gradients and Patterns)
<div class="bg-gradient-to-r from-green-400 via-blue-500 to-purple-600 p-4
text-white">
Gradient Background
</div>
<div class="bg-fixed bg-center bg-cover" style="background-image:
url('https://example.com/pattern.png');">
Fixed Background Pattern
</div>
Borders (Advanced)
<div class="border-t-4 border-r-4 border-b-4 border-l-4 border-green-500
rounded-xl p-4">
Thick Green Border with Rounded Corners
</div>
<div class="divide-y-2 divide-gray-400">
<div class="p-4">Divided Item 1</div>
<div class="p-4">Divided Item 2</div>
<div class="p-4">Divided Item 3</div>
</div>
Effects (Filters and Blurs)
<div class="filter blur-sm p-4 bg-blue-500 text-white">
Blurred Background
</div>
<div class="filter brightness-125 p-4 bg-red-500 text-white">
Brightened Background
</div>
Tables (Advanced)
<table class="table-fixed w-full">
<thead>
<tr>
<th class="w-1/2 px-4 py-2">Name</th>
<th class="w-1/4 px-4 py-2">Age</th>
<th class="w-1/4 px-4 py-2">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2">John Doe</td>
<td class="border px-4 py-2">30</td>
<td class="border px-4 py-2">New York</td>
</tr>
<tr>
<td class="border px-4 py-2">Jane Smith</td>
<td class="border px-4 py-2">25</td>
<td class="border px-4 py-2">California</td>
</tr>
</tbody>
</table>
Transitions and Animations (Advanced)
<button class="transition duration-700 ease-in-out bg-blue-500
hover:bg-green-500 transform hover:scale-125">
Hover to Scale
</button>
<div class="animate-pulse h-10 w-10 bg-purple-500">
Pulsing Animation
</div>
Interactivity (Advanced)
<div class="cursor-wait p-4 bg-gray-200">
Wait Cursor
</div>
<div class="pointer-events-auto p-4 bg-gray-300">
Pointer Events Enabled
</div>
Customizing Tailwind (Advanced Configuration)
js
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
},
colors: {
brandBlue: '#1DA1F2',
},
},
},
};
And using the custom classes in HTML:
<div class="w-128 h-128 bg-brandBlue text-white rounded-4xl p-4">
Custom Width, Height, Color, and Border Radius
</div>
Accessibility (Focus States)
<button class="focus:outline-none focus:ring-2 focus:ring-purple-600
focus:ring-opacity-50">
Focus Ring
</button>
Forms
<input type="text" class="form-input mt-1 block w-full border border-gray-300
rounded-md shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200
focus:ring-opacity-50">
<textarea class="form-textarea mt-1 block w-full border border-gray-300
rounded-md shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200
focus:ring-opacity-50"></textarea>
<select class="form-select mt-1 block w-full border border-gray-300 rounded-md
shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200
focus:ring-opacity-50">
<option>Option 1</option>
<option>Option 2</option>
</select>
Responsive Utilities (Advanced)
<div class="p-4 bg-gray-200 md:bg-green-200 lg:bg-blue-200 xl:bg-red-200
2xl:bg-purple-200">
Responsive Background Colors with Padding
</div>
Custom Grid Layout
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 bg-yellow-300 p-4">Span 2</div>
<div class="col-span-1 bg-yellow-400 p-4">Span 1</div>
<div class="col-span-3 bg-yellow-500 p-4">Span 3</div>
</div>
Advanced Backgrounds (Patterns and Gradients)
<div class="bg-gradient-to-b from-pink-500 via-red-500 to-yellow-500 p-4 text-white">
Gradient Background
</div>
<div class="bg-pattern-stripes bg-repeat p-4 text-white" style="background-image:
url('https://example.com/stripes.png');">
Patterned Background
</div>
Complex Layouts with Flexbox
<div class="flex flex-col md:flex-row">
<div class="flex-1 bg-blue-200 p-4">Column 1</div>
<div class="flex-1 bg-blue-300 p-4">Column 2</div>
<div class="flex-1 bg-blue-400 p-4">Column 3</div>
</div>
Custom Buttons
<button class="bg-indigo-500 text-white font-bold py-2 px-4 rounded hover:bg-indigo-700
focus:outline-none focus:shadow-outline">
Custom Button
</button>
<button class="bg-gradient-to-r from-teal-400 to-blue-500 text-white font-bold py-2
px-4 rounded-full transform hover:scale-110 transition duration-500">
Gradient Button
</button>
Card Component
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<img class="w-full" src="https://example.com/image.jpg" alt="Image">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Card Title</div>
<p class="text-gray-700 text-base">
Card content goes here. This is a simple card component.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold
text-gray-700 mr-2 mb-2">#tag1</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold
text-gray-700 mr-2 mb-2">#tag2</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold
text-gray-700 mr-2 mb-2">#tag3</span>
</div>
</div>
Form Styling
<form class="w-full max-w-lg">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-first-name">
First Name
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border
border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white
focus:border-gray-500" id="grid-first-name" type="text" placeholder="Jane">
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-last-name">
Last Name
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border
border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white
focus:border-gray-500" id="grid-last-name" type="text" placeholder="Doe">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-password">
Password
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border
border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
focus:border-gray-500" id="grid-password" type="password" placeholder="*************
*****">
<p class="text-gray-600 text-xs italic">Make it as long and as crazy as you'd
like</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-2">
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-city">
City
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border
border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white
focus:border-gray-500" id="grid-city" type="text" placeholder="Albuquerque">
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold
mb-2" for="grid-state">
State
</label>
<div class="relative">
<select class="block appearance-none w-full bg-gray-200 border
border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none
focus:bg-white focus:border-gray-500" id="grid-state">
<option>New Mexico</option>
<option>Missouri</option>
<option>Texas</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center
px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1
1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold
mb-2" for="grid-zip">
Zip
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border
border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white
focus:border-gray-500" id="grid-zip" type="text" placeholder="90210">
</div>
</div>
</form>
Navigation Bar
<nav class="bg-gray-800 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white font-bold text-lg">
Brand
</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
</ul>
</div>
</nav>
Hero Section
<section class="bg-cover bg-center h-screen" style="background-image:
url('https://example.com/hero.jpg');">
<div class="flex items-center justify-center h-full bg-black bg-opacity-50">
<div class="text-center text-white">
<h1 class="text-4xl font-bold mb-4">Welcome to Our Website</h1>
<p class="text-lg mb-8">We provide the best services for you.</p>
<a href="#" class="bg-blue-500 text-white py-2 px-4 rounded-full
hover:bg-blue-700 transition duration-300">Get Started</a>
</div>
</div>
</section>
Footer
<footer class="bg-gray-800 text-gray-400 py-8">
<div class="container mx-auto text-center">
<p>© 2024 Your Company. All rights reserved.</p>
<ul class="flex justify-center space-x-4 mt-4">
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white">Terms of Service</a></li>
<li><a href="#" class="hover:text-white">Contact</a></li>
</ul>
</div>
</footer>
These examples demonstrate the extensive capabilities of Tailwind CSS, from
advanced layout options and complex components to responsive design and
customizations.
0 Comments