Tailwind CSS Complete Notes
1. What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides low-level
utility classes to build custom designs quickly and efficiently. Unlike
traditional CSS frameworks like Bootstrap, which offer pre-styled
components, Tailwind allows developers to apply utility classes directly
to HTML elements to control layout, spacing, typography, colors, and
more.
Key Features of Tailwind CSS:
• Utility-first: Focuses on low-level utility classes, allowing for
faster customization and development.
• Customizable: Offers easy customization using configuration
files.
• Responsive design: Built-in support for responsive design through
breakpoints.
• No predefined components: Unlike frameworks like Bootstrap, it
doesn't include pre-made UI components (e.g., buttons, navbars),
giving you complete control over your design.
2. Why use Tailwind CSS over traditional CSS frameworks like
Bootstrap?
Here are some reasons to choose Tailwind CSS over traditional CSS
frameworks like Bootstrap:
a) More Control Over Design:
• Bootstrap comes with predefined components, which may limit
customization. Tailwind CSS, on the other hand, provides utilities
to design everything from scratch, ensuring the look and feel are
fully customized.
b) Smaller Bundle Size:
• Tailwind CSS enables you to generate only the styles you need by
purging unused CSS when building your project, keeping the final
bundle size small.
c) Faster Development:
• Tailwind's utility-first approach enables faster prototyping and
iteration. You can directly apply utility classes to elements in your
HTML, reducing the need for custom CSS or complex class
names.
d) Easier Maintenance:
• As styles are applied directly to elements, there's less custom CSS
to manage. It helps in reducing CSS file size and simplifying
maintenance.
e) Better Responsiveness:
• Tailwind CSS offers responsive design utilities right out of the
box. You can easily control the design across different screen sizes
using classes like sm:, md:, lg:, etc.
f) Highly Customizable:
• Tailwind provides a configuration file ([Link])
where you can define custom colors, fonts, breakpoints, and more
to match your brand or project needs.
3. Setting up Tailwind CSS in a project (CDN vs. Local Installation)
There are two main ways to set up Tailwind CSS in a project: using
CDN or local installation.
CDN (Content Delivery Network) Method:
Using a CDN to include Tailwind is the quickest and easiest way to get
started with Tailwind CSS. This method is good for small projects or
quick prototypes.
Steps:
1. Add the Tailwind CDN link inside the <head> tag of your HTML
file:
html
CopyEdit
<head>
<link
href="[Link]
2.0/dist/[Link]" rel="stylesheet">
</head>
2. Now you can start using Tailwind's utility classes directly in your
HTML.
Pros:
• Quick and easy setup.
• No need for installation or build tools.
Cons:
• CDN may add latency to page loads.
• No support for purging unused CSS, which can increase file size in
large projects.
Local Installation Method:
To use Tailwind CSS more effectively in larger projects, it is
recommended to install it locally with [Link] and configure it with a
build tool like Webpack, PostCSS, or Vite. This gives you the ability to
customize Tailwind and purge unused CSS to optimize the final file size.
Steps:
1. Install Tailwind CSS via npm:
bash
CopyEdit
npm install tailwindcss
2. Create a configuration file for Tailwind:
bash
CopyEdit
npx tailwindcss init
3. Create a [Link] file for customization (e.g.,
colors, fonts).
4. Create a [Link] file if you're using PostCSS for
your build process:
javascript
CopyEdit
[Link] = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
5. In your CSS file (e.g., [Link]), import Tailwind:
css
CopyEdit
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
6. Run the build process to generate the final CSS.
Pros:
• Full control over configuration and optimization.
• Ability to purge unused CSS to reduce file size.
• More suitable for larger projects.
Cons:
• Requires build tools and setup.
1. What is Utility-First CSS?
Definition
Utility-first CSS is a design methodology where CSS classes are created
for individual CSS properties (like margin, padding, text color,
background color, etc.). These classes are small, reusable building
blocks that you use to construct designs directly in your HTML without
writing custom CSS.
Example:
Instead of writing this custom CSS:
css
CopyEdit
.card {
background-color: #f3f4f6;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
You can achieve the same using Tailwind’s utility classes:
html
CopyEdit
<div class="bg-gray-100 p-4 rounded-lg shadow-
md">
Card Content
</div>
Advantages:
1. Faster styling process – no need to write custom CSS rules.
2. Consistent design – Tailwind provides a design system out of the
box.
3. Smaller CSS files – especially with Tailwind's tree-shaking, only the
classes you use are included in the final build.
2. How Tailwind Works with Utility Classes
Tailwind CSS comes with a comprehensive set of pre-defined utility
classes. Here's how it works:
1. Direct HTML Styling: You apply utility classes directly in your
HTML elements. Example:
html
CopyEdit
<h1 class="text-2xl font-bold text-center
text-blue-500">
Hello, Tailwind!
</h1>
o text-2xl: Sets the font size.
o font-bold: Makes the text bold.
o text-center: Aligns text to the center.
o text-blue-500: Sets the text color to blue.
2. Combining Utilities: You can combine multiple utility classes to
achieve complex designs. For example:
html
CopyEdit
<button class="bg-green-500 text-white px-4
py-2 rounded-lg hover:bg-green-600">
Click Me
</button>
o bg-green-500: Background color.
o text-white: Text color.
o px-4 py-2: Padding (horizontal and vertical).
o rounded-lg: Rounded corners.
o hover:bg-green-600: Changes background color on
hover.
3. Responsive Classes: Tailwind makes it easy to add responsive
styles. Example:
html
CopyEdit
<div class="p-4 md:p-8 lg:p-12">
Responsive Padding
</div>
o p-4: Padding for all screen sizes.
o md:p-8: Padding for medium screens and larger.
o lg:p-12: Padding for large screens and larger.
3. Benefits of Utility-First Design
1. Speed and Efficiency:
o No need to write separate CSS files or classes.
o Changes are instantly visible in your HTML.
2. Consistency:
o Tailwind ensures a uniform design system.
o Using pre-defined classes avoids variations caused by
inconsistent custom CSS.
3. Minimal CSS:
o Tailwind’s JIT (Just-In-Time) mode ensures only the classes
used in your project are included in the final CSS file.
4. Customizability:
o While utility-first is about reusing pre-defined classes,
Tailwind provides robust options for customization.
5. Better Maintenance:
o With utility classes directly in the HTML, you don’t have to
search for CSS rules across multiple files when making
changes.
1. Overview of Tailwind CSS Classes
What Are Tailwind CSS Classes?
Tailwind CSS provides utility-first classes for styling directly in your
HTML. These classes are designed for specific CSS properties, like
margins (m-4), padding (p-4), colors (bg-blue-500), and more.
Key Features:
• Atomic Classes: Each class corresponds to a single CSS rule.
• Reusability: Classes can be combined to create complex designs.
• Predefined Values: Classes use a design system with predefined
values (like 4px, 8px, etc.), ensuring consistency.
Examples:
html
CopyEdit
<h1 class="text-2xl font-bold text-center text-
blue-500">
Welcome to Tailwind CSS
</h1>
• text-2xl: Sets font size to 1.5rem.
• font-bold: Makes the font bold.
• text-center: Aligns the text to the center.
• text-blue-500: Sets the text color to blue.
2. How to Use Classes for Layout and Styling
1. Margins and Padding
Tailwind makes it easy to add spacing with utility classes:
• m-: Margin
• p-: Padding
Example:
html
CopyEdit
<div class="p-4 m-4 bg-gray-200">
Content with padding and margin
</div>
Shortcut Classes:
• mx-4: Horizontal margin (left and right).
• my-4: Vertical margin (top and bottom).
• px-4: Horizontal padding.
• py-4: Vertical padding.
2. Flexbox
Tailwind simplifies flexbox layouts with intuitive classes:
• flex: Activates flexbox.
• flex-row: Default row direction.
• flex-col: Stacks items in a column.
Example:
html
CopyEdit
<div class="flex gap-4">
<div class="bg-blue-500 p-4 text-white">Box
1</div>
<div class="bg-green-500 p-4 text-white">Box
2</div>
</div>
3. Grid
You can use the grid layout with Tailwind:
• grid: Activates grid.
• grid-cols-: Defines the number of columns.
Example:
html
CopyEdit
<div class="grid grid-cols-3 gap-4">
<div class="bg-red-500 p-4 text-white">Item
1</div>
<div class="bg-yellow-500 p-4 text-white">Item
2</div>
<div class="bg-blue-500 p-4 text-white">Item
3</div>
</div>
4. Typography
Tailwind offers utilities for text styling:
• text-: Sets font size.
• font-: Adjusts font weight.
• leading-: Controls line height.
Example:
html
CopyEdit
<p class="text-lg font-semibold leading-
relaxed">
Tailwind makes typography simple!
</p>
3. Understanding Space-x, Space-y, Gap, etc.
1. Space-x / Space-y
• space-x-*: Adds horizontal space between child elements.
• space-y-*: Adds vertical space between child elements.
Example:
html
CopyEdit
<div class="flex space-x-4">
<div class="bg-red-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2</div>
<div class="bg-blue-500 p-4">Item 3</div>
</div>
This adds 16px (space-x-4) of space between the items horizontally.
2. Gap
Used for spacing in grid and flexbox layouts:
• gap-*: Adds space between items in both directions.
• gap-x-*: Horizontal spacing.
• gap-y-*: Vertical spacing.
Example:
html
CopyEdit
<div class="grid grid-cols-2 gap-4">
<div class="bg-purple-500 p-4">Box 1</div>
<div class="bg-yellow-500 p-4">Box 2</div>
</div>
4. Responsive Classes: sm:, md:, lg:, xl:
Tailwind’s Mobile-First Approach
Tailwind uses a mobile-first design approach. Classes prefixed with
responsive breakpoints (sm:, md:, etc.) apply styles for specific screen
sizes.
Breakpoints:
• sm: 640px and up
• md: 768px and up
• lg: 1024px and up
• xl: 1280px and up
• 2xl: 1536px and up
Example:
html
CopyEdit
<div class="bg-gray-200 p-4 sm:bg-blue-200
md:bg-green-200 lg:bg-yellow-200 xl:bg-red-200">
Responsive Background Colors
</div>
• Default: bg-gray-200 (applies to all screen sizes).
• sm:bg-blue-200: Blue background for screens 640px and up.
• md:bg-green-200: Green background for screens 768px and
up.
• lg:bg-yellow-200: Yellow background for screens 1024px
and up.
• xl:bg-red-200: Red background for screens 1280px and up.
Combining Responsive Utilities
Responsive classes can be combined with any utility.
Example:
html
CopyEdit
<div class="text-sm sm:text-lg md:text-xl
lg:text-2xl xl:text-3xl">
Responsive Font Sizes
</div>
Responsive Layout Example:
html
CopyEdit
<div class="grid grid-cols-1 sm:grid-cols-2
md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="bg-red-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2</div>
<div class="bg-blue-500 p-4">Item 3</div>
<div class="bg-yellow-500 p-4">Item 4</div>
</div>
• grid-cols-1: Single column on small screens.
• sm:grid-cols-2: Two columns for 640px and up.
• md:grid-cols-3: Three columns for 768px and up.
• lg:grid-cols-4: Four columns for 1024px and up.
1. Flexbox Utilities
Flexbox is a powerful tool for creating responsive and dynamic layouts.
Tailwind simplifies it with utilities.
1.1 Basic Flexbox Utilities
• flex: Activates flexbox.
• flex-row: Sets items in a row (default).
• flex-col: Sets items in a column.
• justify-*: Aligns items horizontally.
o justify-start: Align to the start.
o justify-center: Center align.
o justify-between: Space between items.
o justify-around: Space around items.
o justify-evenly: Equal spacing.
Example:
html
CopyEdit
<div class="flex justify-between bg-gray-100 p-
4">
<div class="bg-blue-500 p-4 text-white">Box
1</div>
<div class="bg-green-500 p-4 text-white">Box
2</div>
<div class="bg-red-500 p-4 text-white">Box
3</div>
</div>
1.2 Align Items Vertically
• items-*: Aligns items vertically.
o items-start: Align to the top.
o items-center: Center vertically.
o items-end: Align to the bottom.
o items-stretch: Stretch to fill.
Example:
html
CopyEdit
<div class="flex items-center bg-gray-100 h-32">
<div class="bg-blue-500 p-4 text-
white">Aligned Center</div>
</div>
1.3 Controlling Flex Item Behavior
• flex-1: Makes the item take up remaining space.
• flex-none: Prevents item from growing/shrinking.
• flex-grow: Allows item to grow if needed.
• flex-shrink: Allows item to shrink if needed.
Example:
html
CopyEdit
<div class="flex">
<div class="flex-1 bg-blue-500 p-4 text-
white">Grows to fill</div>
<div class="flex-none bg-green-500 p-4 text-
white">Fixed</div>
</div>
2. Grid System
Tailwind provides an easy-to-use grid system.
2.1 Activating Grid
• Use grid to activate the grid system.
• Define columns with grid-cols-* (e.g., grid-cols-2,
grid-cols-3).
Example:
html
CopyEdit
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-500 p-4 text-white">Item
1</div>
<div class="bg-green-500 p-4 text-white">Item
2</div>
<div class="bg-red-500 p-4 text-white">Item
3</div>
</div>
2.2 Grid Gap
• gap-*: Adds space between grid items.
• gap-x-*: Horizontal gap.
• gap-y-*: Vertical gap.
Example:
html
CopyEdit
<div class="grid grid-cols-2 gap-4">
<div class="bg-purple-500 p-4 text-white">Item
1</div>
<div class="bg-yellow-500 p-4 text-white">Item
2</div>
</div>
2.3 Spanning Columns and Rows
• col-span-*: Span columns.
• row-span-*: Span rows.
Example:
html
CopyEdit
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 bg-blue-500 p-4 text-
white">Span 2 Columns</div>
<div class="bg-green-500 p-4 text-
white">Item</div>
</div>
3. Width and Height Utilities
Tailwind provides classes for controlling width (w-*) and height (h-*).
3.1 Width Utilities
• w-full: Full width.
• w-1/2: 50% width.
• w-1/4: 25% width.
• w-64: Fixed width (e.g., 16rem).
Example:
html
CopyEdit
<div class="bg-gray-100">
<div class="bg-blue-500 w-1/2 p-4 text-
white">50% Width</div>
</div>
3.2 Height Utilities
• h-full: Full height.
• h-32: Fixed height (e.g., 8rem).
• h-screen: Height of the viewport.
Example:
html
CopyEdit
<div class="bg-gray-100 h-32 flex items-center
justify-center">
<div class="bg-blue-500 text-white p-4">Fixed
Height</div>
</div>
3.3 Aspect Ratio
Control the aspect ratio of elements with aspect-* classes:
• aspect-square: 1:1 ratio.
• aspect-video: 16:9 ratio.
Example:
html
CopyEdit
<div class="aspect-video bg-blue-500 text-
white">16:9 Aspect Ratio</div>
4. Padding and Margin Utilities
4.1 Padding (p-*)
• Adds spacing inside an element.
• Classes include p-1, p-2, up to p-96.
Example:
html
CopyEdit
<div class="bg-gray-100 p-8">
<div class="bg-blue-500 text-white">Padded
Content</div>
</div>
4.2 Margin (m-*)
• Adds spacing outside an element.
• Classes include m-1, m-2, up to m-96.
Example:
html
CopyEdit
<div class="m-8 bg-gray-100">
<div class="bg-blue-500 text-white p-4">Margin
Applied</div>
</div>
4.3 Combining Padding and Margin
You can combine these utilities for precise spacing.
Example:
html
CopyEdit
<div class="m-4 p-4 bg-gray-100">
<div class="p-8 bg-blue-500 text-white">Margin
+ Padding</div>
</div>
5. Putting It All Together
Here's a complete layout example using all these utilities:
html
CopyEdit
<div class="p-8 bg-gray-100">
<div class="grid grid-cols-3 gap-4">
<div class="flex flex-col items-center
justify-center bg-blue-500 text-white p-4 h-32">
Flexbox Content
</div>
<div class="grid grid-cols-2 gap-2 bg-green-
500 text-white p-4 h-32">
<div>Grid 1</div>
<div>Grid 2</div>
</div>
<div class="bg-red-500 text-white p-4 h-
32">Simple Box</div>
</div>
</div>
1. Tailwind Color Palette
Tailwind includes a wide range of colors out of the box. You can also
define custom colors using the configuration file.
1.1 Default Color Palette
Tailwind's colors are categorized into shades, making it easier to
maintain consistency. Common colors include:
• Gray: gray-50, gray-100, gray-900, etc.
• Blue: blue-50, blue-500, blue-900, etc.
• Red: red-50, red-500, red-900, etc.
Each color comes with shades ranging from 50 (lightest) to 900
(darkest).
Example:
html
CopyEdit
<div class="p-4 bg-blue-500 text-white">Blue
Background</div>
<div class="p-4 bg-red-500 text-white">Red
Background</div>
1.2 Custom Colors
To customize colors, modify the [Link] file:
javascript
CopyEdit
[Link] = {
theme: {
extend: {
colors: {
brand: {
light: '#3AB0FF',
DEFAULT: '#0056D2',
dark: '#001D4A',
},
},
},
},
};
You can now use bg-brand, bg-brand-light, and bg-brand-
dark in your HTML.
Example:
html
CopyEdit
<div class="p-4 bg-brand text-white">Custom
Brand Color</div>
2. Background Colors and Text Colors
2.1 Background Colors (bg-*)
• Use bg-* classes to apply background colors.
• Tailwind allows color shades for precise control (e.g., bg-blue-
100, bg-blue-500).
Example:
html
CopyEdit
<div class="p-4 bg-blue-100">Light Blue
Background</div>
<div class="p-4 bg-blue-500 text-white">Dark
Blue Background</div>
2.2 Text Colors (text-*)
• Use text-* classes to change text color.
• Combine with background colors for contrast.
Example:
html
CopyEdit
<div class="p-4 bg-gray-900 text-white">White
Text on Dark Background</div>
<div class="p-4 bg-gray-100 text-gray-900">Dark
Text on Light Background</div>
3. Hover, Focus, and Active States
Tailwind supports state variants like hover:, focus:, and
active: to style elements based on user interactions.
3.1 Hover States
• hover:bg-*: Change background on hover.
• hover:text-*: Change text color on hover.
Example:
html
CopyEdit
<button class="p-4 bg-blue-500 text-white
hover:bg-blue-700">
Hover Me
</button>
3.2 Focus States
• focus:bg-*: Change background when focused.
• focus:outline-*: Customize focus outlines.
Example:
html
CopyEdit
<input
type="text"
class="p-2 border-2 border-gray-300
focus:border-blue-500 focus:outline-none"
/>
3.3 Active States
• active:bg-*: Change background when the element is active.
Example:
html
CopyEdit
<button class="p-4 bg-green-500 text-white
active:bg-green-700">
Active State
</button>
Combining States
You can combine multiple states for better interactions.
Example:
html
CopyEdit
<button
class="p-4 bg-red-500 text-white hover:bg-red-
700 focus:ring-4 focus:ring-red-300 active:bg-
red-800"
>
Interactive Button
</button>
4. Opacity and Transparency
Tailwind provides utilities to control the transparency of colors.
4.1 Using Opacity Utilities (opacity-*)
• Classes range from opacity-0 (fully transparent) to opacity-
100 (fully opaque).
Example:
html
CopyEdit
<div class="p-4 bg-blue-500 opacity-50">50%
Opacity</div>
<div class="p-4 bg-blue-500 opacity-100">100%
Opacity</div>
4.2 Adding Transparency to Background and Text
You can use bg-opacity-* and text-opacity-* to control
transparency while retaining the base color.
Example:
html
CopyEdit
<div class="p-4 bg-blue-500 bg-opacity-50 text-
white">
Semi-transparent Background
</div>
<div class="p-4 bg-blue-500 text-white text-
opacity-75">
Semi-transparent Text
</div>
5. Putting It All Together
Here's a complete example using color utilities, hover states, and
opacity:
html
CopyEdit
<div class="p-8 space-y-4">
<div class="p-4 bg-gray-800 text-white
hover:bg-gray-700">
Hover to change background color
</div>
<button
class="p-4 bg-green-500 text-white hover:bg-
green-700 active:bg-green-800 focus:ring-4
focus:ring-green-300"
>
Interactive Button
</button>
<div class="p-4 bg-red-500 bg-opacity-50 text-
white text-opacity-75">
Semi-transparent Background and Text
</div>
</div>
1. Border Radius Utilities
Border radius controls the roundness of the corners of an element.
1.1 Border Radius Classes
Tailwind provides multiple utilities for border radius:
• rounded-sm: Slightly rounded corners.
• rounded: Medium rounded corners.
• rounded-lg: Larger rounded corners.
• rounded-full: Fully rounded (circular).
Example:
html
CopyEdit
<div class="p-4 bg-blue-500 text-white rounded-
sm">Small Rounded</div>
<div class="p-4 bg-blue-500 text-white
rounded">Medium Rounded</div>
<div class="p-4 bg-blue-500 text-white rounded-
lg">Large Rounded</div>
<div class="p-4 bg-blue-500 text-white rounded-
full">Fully Rounded</div>
1.2 Specific Corners
You can round specific corners using:
• rounded-t: Top corners.
• rounded-b: Bottom corners.
• rounded-l: Left corners.
• rounded-r: Right corners.
Example:
html
CopyEdit
<div class="p-4 bg-red-500 text-white rounded-t-
lg">Top Rounded</div>
<div class="p-4 bg-red-500 text-white rounded-b-
lg">Bottom Rounded</div>
2. Border Width and Color
Borders add outlines around elements.
2.1 Border Width
• border: Default border width.
• border-2, border-4, border-8: Thicker borders.
Example:
html
CopyEdit
<div class="p-4 border border-gray-500">Default
Border</div>
<div class="p-4 border-4 border-blue-500">Thick
Border</div>
2.2 Border Color
Tailwind allows you to apply colors to borders:
• border-gray-400, border-red-500, etc.
Example:
html
CopyEdit
<div class="p-4 border-2 border-gray-400">Gray
Border</div>
<div class="p-4 border-2 border-green-500">Green
Border</div>
2.3 Border Opacity
Control transparency using border-opacity-*:
html
CopyEdit
<div class="p-4 border-4 border-blue-500 border-
opacity-50">
Semi-Transparent Border
</div>
3. Box Shadows
Shadows add depth to your designs.
3.1 Basic Shadow Utilities
• shadow-sm: Small shadow.
• shadow: Default shadow.
• shadow-lg: Large shadow.
• shadow-none: Remove shadow.
Example:
html
CopyEdit
<div class="p-4 shadow-sm bg-gray-200">Small
Shadow</div>
<div class="p-4 shadow bg-gray-200">Default
Shadow</div>
<div class="p-4 shadow-lg bg-gray-200">Large
Shadow</div>
3.2 Custom Shadows
Extend boxShadow in [Link] to create custom
shadows:
javascript
CopyEdit
[Link] = {
theme: {
extend: {
boxShadow: {
'glow': '0 0 10px rgba(0, 150, 255,
0.8)',
},
},
},
};
Usage:
html
CopyEdit
<div class="p-4 shadow-glow bg-gray-200 text-
center">
Custom Glow Shadow
</div>
4. Focus Rings and Outline Utilities
Focus rings highlight elements when focused, enhancing accessibility.
4.1 Default Focus Rings
• focus:ring: Adds a focus ring.
• focus:ring-2, focus:ring-4: Thickness.
• focus:ring-blue-500: Custom color.
Example:
html
CopyEdit
<input
type="text"
class="p-2 border focus:ring-2 focus:ring-
blue-500"
/>
4.2 Outlines
• outline: Default outline.
• outline-none: Removes outline.
Example:
html
CopyEdit
<button class="p-4 border focus:outline-none">
No Outline Button
</button>
5. Glowing Borders
Glowing borders add a neon-like effect to an element.
CSS for Glowing Border
Use box-shadow for a glow effect:
javascript
CopyEdit
[Link] = {
theme: {
extend: {
boxShadow: {
'neon': '0 0 10px #0ff, 0 0 20px #0ff, 0
0 30px #0ff',
},
},
},
};
Example:
html
CopyEdit
<div class="p-4 border-2 border-blue-500 shadow-
neon">
Glowing Border
</div>
6. Animated Borders
Animated borders make designs dynamic and engaging.
6.1 Keyframes for Animation
Add the animation in [Link]:
javascript
CopyEdit
[Link] = {
theme: {
extend: {
animation: {
'border-glow': 'glow 2s infinite',
},
keyframes: {
glow: {
'0%, 100%': { borderColor: '#ff0' },
'50%': { borderColor: '#f00' },
},
},
},
},
};
6.2 Usage
html
CopyEdit
<div class="p-4 border-4 border-blue-500
animate-border-glow">
Animated Border
</div>
7. Combining Everything
Here's a complete example that combines borders, shadows, focus rings,
and animations:
html
CopyEdit
<div class="p-8 space-y-6 text-center">
<!-- Rounded and Shadow -->
<div class="p-4 bg-blue-500 text-white
rounded-lg shadow-lg">
Rounded and Shadow
</div>
<!-- Focus Ring -->
<input
type="text"
class="p-2 border-2 focus:ring-2 focus:ring-
green-500"
placeholder="Focus Me"
/>
<!-- Glowing Border -->
<div class="p-4 border-2 border-blue-500
shadow-neon">
Glowing Border
</div>
<!-- Animated Border -->
<div class="p-4 border-4 border-red-500
animate-border-glow">
Animated Border
</div>
</div>
1. Position Utilities
Tailwind CSS offers utilities for different positioning schemes:
1.1 Relative Positioning
An element's position is relative to its normal position. Other elements
are unaffected.
html
CopyEdit
<div class="relative">
<div class="absolute top-2 left-2 bg-blue-500
text-white p-2">
I’m positioned relative to this container
</div>
</div>
• Class: relative
1.2 Absolute Positioning
An element is positioned relative to its nearest positioned ancestor.
html
CopyEdit
<div class="relative h-32 bg-gray-200">
<div class="absolute top-0 right-0 bg-blue-500
text-white p-2">
Positioned absolutely
</div>
</div>
• Class: absolute
1.3 Fixed Positioning
An element is positioned relative to the viewport, meaning it stays
fixed even when scrolling.
html
CopyEdit
<div class="fixed bottom-2 right-2 bg-green-500
text-white p-2">
Fixed to bottom-right
</div>
• Class: fixed
1.4 Sticky Positioning
A sticky element toggles between relative and fixed, depending
on scroll position.
html
CopyEdit
<div class="h-96 overflow-y-scroll bg-gray-100">
<div class="sticky top-0 bg-yellow-500 text-
white p-4">
I'm a sticky header
</div>
<p class="p-4">Scroll to see sticky
behavior!</p>
</div>
• Class: sticky
2. Z-Index Utilities
Z-index controls the stacking order of elements.
2.1 Default Z-Index
The default z-index of elements is auto, meaning they appear in the
order they are written in the HTML.
2.2 Z-Index Utilities
• z-0: Sets z-index to 0.
• z-10, z-20, z-30: Increase stacking order.
• z-auto: Resets to auto.
Example:
html
CopyEdit
<div class="relative z-10 bg-blue-500 text-white
p-4">I am on top</div>
<div class="relative z-0 bg-gray-500 text-white
p-4">I am below</div>
3. Top, Right, Bottom, and Left Positioning
These utilities allow you to position elements along the x and y axes.
3.1 Positional Utilities
• Top: top-0, top-1/2, top-full, top-[50px]
• Right: right-0, right-1/2, right-full
• Bottom: bottom-0, bottom-1/2, bottom-full
• Left: left-0, left-1/2, left-full
Example:
html
CopyEdit
<div class="relative h-32 bg-gray-200">
<div class="absolute top-0 left-0 bg-red-500
text-white p-2">
Top-Left
</div>
<div class="absolute bottom-0 right-0 bg-blue-
500 text-white p-2">
Bottom-Right
</div>
</div>
3.2 Centering with Position
Center an element both horizontally and vertically using absolute
and top-1/2 with transform:
html
CopyEdit
<div class="relative h-64 bg-gray-300">
<div class="absolute top-1/2 left-1/2 -
translate-x-1/2 -translate-y-1/2 bg-green-500
text-white p-4">
Centered Element
</div>
</div>
4. Combining Positioning Utilities
Here's how you can combine positioning, z-index, and relative/absolute
for a practical layout:
Example:
html
CopyEdit
<div class="relative h-screen bg-gray-100">
<!-- Sticky Header -->
<div class="sticky top-0 bg-yellow-500 text-
white p-4">
Sticky Header
</div>
<!-- Main Content -->
<div class="relative h-96 bg-gray-200 p-4">
<div class="absolute top-4 left-4 bg-blue-
500 text-white p-2">
Top-Left (Absolute)
</div>
<div class="absolute bottom-4 right-4 bg-
green-500 text-white p-2 z-10">
Bottom-Right (Absolute + Z-index)
</div>
</div>
<!-- Fixed Footer -->
<div class="fixed bottom-0 w-full bg-red-500
text-white p-4 text-center">
Fixed Footer
</div>
</div>
5. Practical Use Case: Tooltip
Positioning is often used for tooltips.
Example:
html
CopyEdit
<div class="relative">
<button class="bg-blue-500 text-white px-4 py-
2">Hover me</button>
<div class="absolute top-full left-1/2 -
translate-x-1/2 mt-2 bg-gray-700 text-white
text-sm px-4 py-2 rounded">
Tooltip content
</div>
</div>
3D Perspective
<div class="perspective-distant"> <article class="rotate-x-51 rotate-z-
43 transform-3d ..."> <!-- ... --> </article></div>