Html Question posted in
Some basic documentation can be found here.

Html – tailwind apply doesnt work in tailwind version 3

I have installed tailwind successfully. When it comes to using the @apply, things are not working.

<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

@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.
Tags:

2

Answers


  1. 0

    You need to use the tailwind @layer directive for the @apply classes to work.

    @tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

  .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;
  }

}
    Login or Signup to reply.
  2. 0

    I think you accidently forgot adding the hamburger class in button element.

    <button id="hamburger" name="hamburger" type="button" class="hamburger block absolute right-4">

    Also try using this to access active state of button element:

    .hamburger:active>span:nth-child(1) {
    @apply origin-top-left rotate-45;
}

.hamburger:active>span:nth-child(3) {
    @apply origin-bottom-left -rotate-45;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search