Tailwind - css rule is invisible if I use layer

Question

Do you have any ideas why @layer in Tailwind CSS doesn't work?

If I write in my styles.css for example

h1 {
  @apply text-2xl;
}

it works but if I do:

@layer base {
  h1 {
    @apply text-2xl;
  }
}

it doesn't. It just doesn't see this style.

We need to see the whole CSS file. Do you have @tailwind base; before your @layer ? — Matt
– Matt, Commented Oct 12, 2020 at 20:35
Yes, I have @tailwind base; @tailwind components; @tailwind utilities; at the beginning of the file. — maja
– maja, Commented Oct 14, 2020 at 15:01

nkrivenko · Accepted Answer · 2022-06-16 15:53:10Z

2

I have got same error but i figured out from inspecting elements that inherited styles have been applied then i add some more styles to strong elements then mounted css styles have more precedence because of selectors and it worked..

@layer base {
    h1 {    
        @apply text-green-600 font-bold text-4xl;
    }  strong {
        @apply text-gray-800 font-extrabold text-2xl;
    }
}

edited Jun 16, 2022 at 15:53

nkrivenko

1,3113 gold badges14 silver badges23 bronze badges

answered Jun 11, 2022 at 1:24

Dot Simplify

254 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt · Accepted Answer · 2020-10-22 15:39:09Z

1

It's possible that your h1 style is getting purged by Tailwind's styler purging process: https://tailwindcss.com/docs/controlling-file-size:

Using the @layer directive will also instruct Tailwind to consider those styles for purging when purging the layer.

Since, presumably, you're not referencing the h1 style with @apply, maybe Tailwind is considering the style unused. Although, one would hope that Tailwind would not purge a tag-based selector.

Take a look at the CSS file that is built, either on the file system or inspector in the browser, and look for your h1 styles.

From the Tailwind docs, maybe try adding h1 to your whitelist - although I don't think it will work since the whitelist seems to want class-based selectors.

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],

    // These options are passed through directly to PurgeCSS
    options: {
      whitelist: ['bg-red-500', 'px-4'],
    }
  },
  // ...
}

I recommend asking if tag selectors work with layers on the Tailwind Discord or forum: https://tailwindcss.com/community

answered Oct 22, 2020 at 15:39

Matt

3,6704 gold badges40 silver badges50 bronze badges

1 Comment

maja Over a year ago

I tried and it didn't helped. Also, h1 is just an example but with class selectors it also doesn't work. And tag selectors should work with layers because it's in documentation: tailwindcss.com/docs/adding-base-styles

Collectives™ on Stack Overflow

Tailwind - css rule is invisible if I use layer

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related