I have installed tailwind successfully. When it comes to using the @apply, things are not working.
<code><body>
<!-- header -->
<header class="bg-transparent absolute top-0 left-0 w-full flex items-center z-10">
<div class="container">
<div class="flex items-center justify-between relative">
<div class="px-4">
<a href="#home" class="font-bold text-lg text-primary block py-6">shrlrmdh</a>
</div>
<div class="flex items-center px-4">
<button id="hamburger" name="hamburger" type="button" class="block absolute right-4">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</div>
</header>
</body>
</code>
<code><body>
<!-- header -->
<header class="bg-transparent absolute top-0 left-0 w-full flex items-center z-10">
<div class="container">
<div class="flex items-center justify-between relative">
<div class="px-4">
<a href="#home" class="font-bold text-lg text-primary block py-6">shrlrmdh</a>
</div>
<div class="flex items-center px-4">
<button id="hamburger" name="hamburger" type="button" class="block absolute right-4">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</div>
</header>
</body>
</code>
<body>
<!-- header -->
<header class="bg-transparent absolute top-0 left-0 w-full flex items-center z-10">
<div class="container">
<div class="flex items-center justify-between relative">
<div class="px-4">
<a href="#home" class="font-bold text-lg text-primary block py-6">shrlrmdh</a>
</div>
<div class="flex items-center px-4">
<button id="hamburger" name="hamburger" type="button" class="block absolute right-4">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</div>
</header>
</body>
I want create a line and rotate the span by just using @apply directive
And this is my tailwind css file where I put the @apply directive
<code>@tailwind base;
@tailwind components;
@tailwind utilities;
.hamburger-line {
@apply w-[30px] h-[2px] my-2 block bg-black;
}
.hamburger-active > span:nth-child(1) {
@apply origin-top-left rotate-45;
}
.hamburger-active > span:nth-child(3) {
@apply origin-bottom-left -rotate-45;
}
'''
I've tried many methods but @apply still doesn't work.
</code>
<code>@tailwind base;
@tailwind components;
@tailwind utilities;
.hamburger-line {
@apply w-[30px] h-[2px] my-2 block bg-black;
}
.hamburger-active > span:nth-child(1) {
@apply origin-top-left rotate-45;
}
.hamburger-active > span:nth-child(3) {
@apply origin-bottom-left -rotate-45;
}
'''
I've tried many methods but @apply still doesn't work.
</code>
@tailwind base;
@tailwind components;
@tailwind utilities;
.hamburger-line {
@apply w-[30px] h-[2px] my-2 block bg-black;
}
.hamburger-active > span:nth-child(1) {
@apply origin-top-left rotate-45;
}
.hamburger-active > span:nth-child(3) {
@apply origin-bottom-left -rotate-45;
}
'''
I've tried many methods but @apply still doesn't work.
New contributor
Kvme is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.