Custom CSS NOT replacing Tailwind CSS Preflight

I dunno, but my setup works:

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

<my custom css code>

My postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss/nesting'),
        require('tailwindcss'),
        require('autoprefixer'),
    ],  
};

I think you have to use the @layer base directive for that… Per the documentation:

If you want to add your own default base styles for specific HTML elements, use the @layer directive to add those styles to Tailwind’s base layer.

I think this is also cross-referenced from the docs on the page you posted.
BTW, you can also look at the typography-plugin source code since they do basically the same thing - or open a discussion on the Tailwind repo if that’s the case.

Thank you @derek-zhou and @thiagomajesk for your comments.
I still couldn’t make it work tweaking postcss.config.js or using @layer base.

It seems most custom css is replacing preflight’s, except background-color: transparent; from buttons/submits.
I see on preflight button reset in v3 inconsistent with v2 · Issue #6602 · tailwindlabs/tailwindcss · GitHub that more people had problems with that.

However, in staging & production does work for me but not in development.
Any idea? Thanks!!

by looking in the tailwindcss documentation, you are able to extend or disable preflight https://tailwindcss.com/docs/preflight

Thanks @odix67 for your comment.

If I disable preflight, it works. However, I’d like to keep it as I use some components from https://tailwindui.com and they rely on the styles of preflight.

By the way, extending preflight doesn’t seem to work either:

app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

<other imports>

@layer base {
  button,.button,input[type='button'],input[type='reset'],input[type='submit'] {
    @apply bg-blue-600;
  }
}

<other custom css>

The background-color of my buttons is still transparent as defined by preflight.

Did I miss anything when extending preflight?
Thanks!

Why you insist on:

While all tailwind examples I have seen use the following:

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

@derek-zhou It’s actually a perfectly valid way of using it you are importing multiple files, you can read here why it’s necessary: Using with Preprocessors - Tailwind CSS. I also do this and it shouldn’t be the cause of the problem.

@hectorperez If I may, since this is not an elixir/ phoenix problem I think you should open an issue/ discussion in the tailwind repo, perhaps it’s something that’s already been tracked or discussed. IMHO, your chances of getting better support will increase because there are certainly people more focused on this particular subject over there.

Thanks @thiagomajesk.

I asked here because it works in staging & production but not in development so maybe someone here know why.
But I’ll try to ask there too, thanks.

Can you post your CSS build setup for those environments?