Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs.
Unlike Bootstrap, which provides pre-designed components, Tailwind gives you the tools to build unique designs from scratch.

npm install -D tailwindcss
npx tailwindcss init

<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-blue-500 text-white p-4">Hello Tailwind</div>

Edit tailwind.config.js:
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
      },
    },
  },
}

Variants are used to apply styles conditionally:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Hover me
</button>

<div class="flex justify-center items-center h-screen">
  <div class="bg-gray-300 p-5">Centered</div>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-red-100 p-4">Box 1</div>
  <div class="bg-red-200 p-4">Box 2</div>
  <div class="bg-red-300 p-4">Box 3</div>
</div>

Add to tailwind.config.js:
theme: {
  extend: {
    fontFamily: {
      custom: ['"Open Sans"', 'sans-serif'],
    },
  },
}
Use in HTML:
<p class="font-custom">Custom font text</p>

Use @apply in CSS to include Tailwind classes:
.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

In tailwind.config.js:
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

`w-` sets the exact width of an element.
`max-w-` sets the maximum width the element can grow to.
Example:
<div class="w-64">Fixed width</div>
<div class="max-w-xl">Max width</div>

<button class="px-4 py-2 text-sm md:text-base bg-green-500 rounded">
  Responsive Button
</button>

Use responsive utilities:
<div class="block md:hidden">Visible only on mobile</div>
<div class="hidden md:block">Hidden on mobile</div>

Use `p-` for padding and `m-` for margin:
<div class="p-4 m-2">Box with spacing</div>

<button class="bg-gray-300 hover:bg-gray-500 text-white px-4 py-2">
  Hover me
</button>

Pseudo-classes like `hover:`, `focus:`, `active:` add state-based styles.
Example:
<input class="focus:outline-none focus:ring-2 focus:ring-blue-500">

Add to tailwind.config.js:
theme: {
  screens: {
    'xs': '480px',
    'sm': '640px',
    ...
  }
}

<img src="..." class="w-full h-auto">

Use `z-` classes:
z-0, z-10, z-20, z-30, z-40, z-50
Example:
<div class="relative z-50">Top layer</div>

<header class="fixed top-0 left-0 w-full bg-white shadow z-50">
  My Fixed Header
</header>

<div class="grid grid-cols-3 gap-4">
  <div class="bg-red-200">1</div>
  <div class="bg-red-300">2</div>
  <div class="bg-red-400">3</div>
</div>

Use `animate-` utilities with plugins:
<div class="animate-bounce">Bouncing Element</div>

Use `shadow` classes:
shadow-sm, shadow, shadow-md, shadow-lg
Example:
<div class="shadow-lg p-4 bg-white">Box with shadow</div>

<div class="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50">
  <div class="bg-white p-6 rounded">Modal content</div>
</div>

Use `flex` with `items-center`:
<div class="flex items-center h-64">
  <p>Centered text</p>
</div>

`object-cover` ensures the image covers its container without distortion.
Example:
<img class="w-full h-64 object-cover" src="image.jpg">

Use `rounded-full` with fixed width/height:
<img class="w-24 h-24 rounded-full" src="profile.jpg">

`container` centers the content and applies responsive max-widths.
Example:
<div class="container mx-auto px-4">Centered content</div>

<nav class="flex items-center justify-between flex-wrap bg-blue-500 p-4">
  <div class="text-white font-bold text-xl">Logo</div>
  <div class="block md:hidden">☰</div>
  <div class="w-full block flex-grow md:flex md:items-center md:w-auto">
    <a class="block mt-4 md:inline-block md:mt-0 text-white mr-4" href="#">Home</a>
  </div>
</nav>

Use the `truncate` class:
<p class="truncate w-48">This is a long text that will be truncated</p>

Use `hover:` prefix to style on hover:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Hover Me
</button>

Use prefixes like `sm:`, `md:`, `lg:` for breakpoints:
<div class="p-2 md:p-6 lg:p-10">Responsive Padding</div>

Use `shadow`, `shadow-md`, `shadow-lg`, etc.:
<div class="shadow-lg p-4">Box with Shadow</div>

Use `z-{index}`:
<div class="relative z-50">Z-index 50</div>

Use `hidden sm:block`:
<div class="hidden sm:block">Visible only on screens ≥ 640px</div>

Use `text-left`, `text-center`, `text-right`:
<p class="text-center">This is centered text</p>

Use `pointer-events-none`:
<div class="pointer-events-none">No click actions allowed here</div>

Limits the max width of the element to the `xl` screen size:
<div class="max-w-screen-xl mx-auto">Centered and max-width limited</div>

Define it in `tailwind.config.js`:
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        custom: ['YourFontName', 'sans-serif'],
      },
    },
  },
}

Then use it:
<p class="font-custom">This uses a custom font</p>

Enable in `tailwind.config.js`:
module.exports = {
  darkMode: 'class',
}

Then use:
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  Content switches with dark mode
</div>

Use `transition` classes:
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 transition duration-300 ease-in-out">
  Hover me
</button>

Utility-first classes are single-purpose CSS classes:
Example:
<div class="text-center bg-red-500 p-4 text-white">Utility-based styling</div>

<div class="bg-white shadow-md rounded-lg p-6 max-w-sm">
  <h2 class="text-xl font-bold mb-2">Card Title</h2>
  <p class="text-gray-600">Card content goes here.</p>
</div>

<div class="grid grid-cols-3 gap-4">
  <div class="bg-red-200 p-4">1</div>
  <div class="bg-green-200 p-4">2</div>
  <div class="bg-blue-200 p-4">3</div>
</div>

<img src="image.jpg" class="w-full h-auto" alt="Responsive Image">

Use `flex`, `flex-col`, `flex-row`, etc.:
<div class="flex flex-row space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<img src="avatar.jpg" class="w-16 h-16 rounded-full" alt="Avatar">

Add animation utilities:
<div class="animate-bounce">Bouncing Element</div>

Use `truncate` with `overflow-hidden` and `whitespace-nowrap`:
<p class="truncate w-48">This is a long piece of text that will be cut off</p>

Use `flex items-center justify-center`:
<div class="flex items-center justify-center h-screen">
  <p>Centered content</p>
</div>

<header class="sticky top-0 bg-white shadow z-50">
  <nav class="p-4">Sticky Header</nav>
</header>

Add to tailwind.config.js:
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1fb6ff',
      }
    }
  }
}

<nav class="flex flex-wrap justify-between items-center p-4">
  <div>Logo</div>
  <div class="hidden md:flex space-x-4">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
</nav>

It allows applying utility classes inside a CSS file:
.btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded;
}

Use the `hover:` prefix:
<button class="bg-green-500 hover:bg-green-700 text-white py-2 px-4">Hover me</button>

<div class="hidden md:block">
  Visible only on medium screens and above
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">Column 1</div>
  <div class="bg-gray-300 p-4">Column 2</div>
  <div class="bg-gray-400 p-4">Column 3</div>
</div>

JIT (Just-in-Time) compiles styles as you write them:
Enable in tailwind.config.js:
module.exports = {
  mode: 'jit',
  ...
}

Use `shadow`, `shadow-md`, `shadow-lg`, etc.:
<div class="shadow-lg p-6 bg-white">Box with shadow</div>

Use `z-{index}`:
<div class="relative z-10">On top</div>
<div class="relative z-0">Behind</div>

Use `leading-{size}`:
<p class="leading-relaxed">This text has relaxed line height.</p>

Centers and sets max-width for content:
<div class="container mx-auto">Centered content</div>

<div class="hover:scale-105 transition-transform duration-300">
  Hover to scale
</div>

<div class="border border-red-500 p-4">Bordered box</div>

<div class="w-full h-screen bg-gray-100">
  Full page container
</div>

<div class="w-full h-full">
  Full width and height content
</div>

It applies typographic styles to content like articles:
<article class="prose">
  <h1>Title</h1>
  <p>Body text</p>
</article>

<div class="transition duration-500 ease-in-out hover:bg-blue-500">
  Hover me
</div>

<div class="flex items-center justify-center h-screen">
  Centered content
</div>

<p class="text-sm md:text-lg lg:text-xl">
  Responsive text
</p>

<div class="bg-white shadow rounded-lg p-4">
  <h2 class="text-lg font-bold">Card Title</h2>
  <p>Card content goes here.</p>
</div>

Adds spacing between children:
<div class="flex space-x-4">
  <div>A</div>
  <div>B</div>
</div>

<footer class="fixed bottom-0 w-full bg-gray-800 text-white p-4">
  Fixed footer content
</footer>

<div class="bg-black bg-opacity-50">
  Semi-transparent background
</div>

<img src="image.jpg" class="w-24 h-24 rounded-full" />

<div class="grid grid-cols-2 gap-6">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="hover:shadow-lg p-4 transition-shadow duration-300">
  Hover me
</div>

<p class="truncate w-64">
  This is a long text that will be truncated.
</p>

<div class="flex flex-col-reverse">
  <div>First</div>
  <div>Second</div>
</div>

<div class="backdrop-blur-sm bg-white/30 p-4">
  Blurred background content
</div>

<input type="text" class="bg-gray-200 text-gray-500 cursor-not-allowed" disabled />

<div class="bg-gradient-to-r from-black via-transparent to-black">
  <img src="bg.jpg" class="absolute w-full h-full object-cover -z-10">
  <div class="relative text-white">Content</div>
</div>

<a href="#" class="hover:underline">Hover me</a>

<div class="max-w-4xl mx-auto">
  Limited width content
</div>

<header class="sticky top-0 bg-white shadow z-50">
  Sticky header
</header>

<div class="hidden sm:block">
  Hidden on mobile
</div>

<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none" />

<input type="checkbox" class="checked:bg-blue-500 checked:border-transparent" />

<div class="aspect-w-16 aspect-h-9">
  <iframe src="..."></iframe>
</div>

<nav class="flex flex-wrap items-center justify-between p-4">
  <div class="text-xl font-bold">Logo</div>
  <div class="hidden md:flex space-x-4">
    <a href="#">Link</a>
    <a href="#">Link</a>
  </div>
</nav>

<div class="overflow-y-scroll h-64">
  Long content here...
</div>

<div class="fixed inset-0 bg-black bg-opacity-50 z-50">
  Overlay content
</div>

<div class="overflow-scroll scrollbar-hide">
  Scrollable without scrollbar
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <div>Item</div>
  <div>Item</div>
</div>

<div class="transition-transform duration-300 hover:scale-110">
  Zoom on hover
</div>

<div class="flex">
  <div class="order-2">Second</div>
  <div class="order-1">First</div>
</div>

<h1 class="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-yellow-500">
  Gradient Text
</h1>

<div class="rounded-t-lg">
  Top-rounded box
</div>

<div class="hover:bg-blue-200 hidden sm:block">
  Hover me (desktop only)
</div>

Edit `tailwind.config.js`:
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem'
      }
    }
  }
}

Beginners To Experts

The site is under development.

Questions

Beginners To Experts

The site is under development.

Questions

1. What is Tailwind CSS and how is it different from Bootstrap?

2. How do you install Tailwind CSS using npm?

3. How do you use Tailwind in an HTML file with CDN?

4. How can you customize the default Tailwind theme?

5. What are variants in Tailwind and how are they used?

6. How can you center a div using Tailwind?

7. How do you create a responsive layout in Tailwind?

8. How can you add custom fonts in Tailwind CSS?

9. What is the `@apply` directive in Tailwind?

10. How do you purge unused CSS in Tailwind?

11. What is the difference between `max-w` and `w` in Tailwind?

12. How do you make a button responsive in Tailwind?

13. How can you hide an element on mobile using Tailwind?

14. How do you add padding and margin in Tailwind?

15. How can you add hover effects using Tailwind?

16. What are pseudo-classes in Tailwind?

17. How do you add custom breakpoints in Tailwind?

18. How do you make an image responsive?

19. How do you control z-index in Tailwind?

20. How do you make a fixed header?

21. How do you use grid layout in Tailwind?

22. How do you animate elements in Tailwind?

23. How do you use shadows in Tailwind?

24. How do you create a modal using Tailwind?

25. How do you align text vertically in Tailwind?

26. What does `object-cover` do in Tailwind CSS?

27. How do you make a circular image in Tailwind?

28. What is the use of `container` class in Tailwind?

29. How do you add a responsive navbar using Tailwind?

30. How do you truncate text with ellipsis in Tailwind?

31. How do you create a hover effect in Tailwind CSS?

32. How can you apply responsive padding using Tailwind?

33. What class would you use to create a shadow in Tailwind?

34. How do you control z-index in Tailwind?

35. How do you make an element hidden on small screens only?

36. How do you align text in Tailwind CSS?

37. How do you disable pointer events using Tailwind?

38. What is the purpose of `max-w-screen-xl`?

39. How do you apply custom fonts in Tailwind?

40. How to use Tailwind with dark mode?

41. How do you apply transitions in Tailwind CSS?

42. What are utility-first classes in Tailwind?

43. How to create a card component in Tailwind?

44. How do you use Tailwind to build a grid layout?

45. How to make a full-width responsive image?

46. What class is used for flexbox in Tailwind?

47. How to create a circle avatar using Tailwind?

48. How to animate an element on load?

49. How to truncate text in Tailwind?

50. How to vertically center using flexbox in Tailwind?

51. How to create a sticky header in Tailwind?

52. How to apply custom colors in Tailwind CSS?

53. How to make a responsive navbar?

54. What is the purpose of @apply in Tailwind?

55. How to handle hover effects in Tailwind CSS?

56. How to hide elements on mobile but show on desktop?

57. How to create responsive columns using Tailwind?

58. What is JIT mode in Tailwind?

59. How do you apply box shadows in Tailwind CSS?

60. How do you use z-index in Tailwind?

61. How do you apply line height in Tailwind?

62. What does Tailwind's `container` class do?

63. How to add hover animation in Tailwind?

64. How do you use border utilities in Tailwind?

65. How to apply full height and width to an element?

66. How to apply full height and width to an element?

67. What does Tailwind’s `prose` class do?

68. How do you use Tailwind for transitions?

69. How to make an element center both vertically and horizontally?

70. How to make text responsive in Tailwind?

71. How to create a card layout with Tailwind?

72. What is the use of `space-x-*` and `space-y-*` utilities?

73. How to implement a fixed footer in Tailwind CSS?

74. How to use opacity in Tailwind?

75. How to create a circular image?

76. How to use grid and gap in Tailwind CSS?

77. How to add shadow only on hover?