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 cs…

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-60…

Why you insist on: [image] hectorperez: @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 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 probl…

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.

@thiagomajesk do you mean the following? package.json ... "scripts": { "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css; cd .. && mix assets.deploy && rm -f _build/esbuild" } config.exs config :esbuild, version: …

By the way, konsalex here recommended me disable preflight and add preflight’s source manually without background-color: transparent;

This is the setup of a a project I’m working on: package.json scripts: "scripts": { "watch": "npm-run-all --parallel watch:*", "deploy": "npm-run-all --parallel deploy:*", "watch:stylesheets": "NODE_ENV=development tailwindcss --input=css/app.css --output=../priv/static/css/app.css --p…

Elixir Programming Language Forum

Custom CSS NOT replacing Tailwind CSS Preflight

Questions & Help Questions

thiagomajesk February 3, 2022, 3:35pm 11

Can you post your CSS build setup for those environments?