Hi,

I have a phoenix 1.6.6 app and tailwind 3.6.18 and tailwind css preflight is loading some base styles Preflight - Base styles - Tailwind CSS

The problem is that my custom css code in app.css is not replacing preflight’s in development. But it works on staging & production. I think my custom css is somehow being loaded before preflight and it should be afterwards — but not sure if this is the problem.

app.css

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

<my custom css code>

I think preflight is loaded after @import "tailwindcss/base" so it should be ok. But it isn’t working so I guess I’m missing something. Therefore, how could I make sure my custom css is loaded after preflight?

Or any idea what the problem could be? Thanks!

By the way, I know I can disable tailwind’s preflight — and my custom css works if I do — but I would like to keep it and have custom css to replace a few styles from preflight.

postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    './js/**/*.js',
    '../lib/*_web/**/*.*ex'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Thanks!