# Custom CSS NOT replacing Tailwind CSS Preflight

**URL:** <https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710>\
**Category:** Questions\
**Tags:** phoenix, css, tailwindcss\
**Created:** [February 1, 2022, 4:49pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710 "2022-02-01T16:49:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 1, 2022, 4:49pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/1 "2022-02-01T16:49:13Z")

</div>

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](https://tailwindcss.com/docs/preflight)

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

```elixir
@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

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

```

tailwind.config.js

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

```

Thanks!

---

<div class="post-metadata">

**Author:** ![derek-zhou](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derek-zhou/32/19943_2.png) [@derek-zhou](https://forum.elixirforum.com/u/derek-zhou)\
**Post date:** [February 1, 2022, 7:39pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/2 "2022-02-01T19:39:12Z")

</div>

I dunno, but my setup works:

```elixir
@tailwind base;
@tailwind components;
@tailwind utilities;

<my custom css code>

```

My postcss.config.js

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

```

---

<div class="post-metadata">

**Author:** ![thiagomajesk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thiagomajesk/32/31904_2.png) [@thiagomajesk](https://forum.elixirforum.com/u/thiagomajesk)\
**Post date:** [February 1, 2022, 8:01pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/3 "2022-02-01T20:01:55Z")

</div>

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

> **[Adding base styles - Adding custom styles - Core concepts](https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles)**
>
> Often the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you. | Best practices for adding your own custom styles in Tailwind projects.

> 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](https://tailwindcss.com/docs/typography-plugin) source code since they do basically the same thing - or open a discussion on the Tailwind repo if that’s the case.

---

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 3, 2022, 9:09am UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/4 "2022-02-03T09:09:59Z")

</div>

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](https://github.com/tailwindlabs/tailwindcss/issues/6602) that more people had problems with that.

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

---

<div class="post-metadata">

**Author:** ![odix67](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/odix67/32/19855_2.png) [@odix67](https://forum.elixirforum.com/u/odix67)\
**Post date:** [February 3, 2022, 9:45am UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/5 "2022-02-03T09:45:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 3, 2022, 10:18am UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/6 "2022-02-03T10:18:47Z")

</div>

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](https://tailwindui.com) and they rely on the styles of preflight.

---

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 3, 2022, 10:48am UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/7 "2022-02-03T10:48:13Z")

</div>

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

app.css

```elixir
@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!

---

<div class="post-metadata">

**Author:** ![derek-zhou](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derek-zhou/32/19943_2.png) [@derek-zhou](https://forum.elixirforum.com/u/derek-zhou)\
**Post date:** [February 3, 2022, 2:29pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/8 "2022-02-03T14:29:51Z")

</div>

Why you insist on:

> [@hectorperez](#):
>
> ```elixir
> @import "tailwindcss/base";
> @import "tailwindcss/components";
> @import "tailwindcss/utilities";
> 
> ```

While all tailwind examples I have seen use the following:

```elixir
@tailwind base;
@tailwind components;
@tailwind utilities;

```

---

<div class="post-metadata">

**Author:** ![thiagomajesk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thiagomajesk/32/31904_2.png) [@thiagomajesk](https://forum.elixirforum.com/u/thiagomajesk)\
**Post date:** [February 3, 2022, 2:44pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/9 "2022-02-03T14:44:21Z")

</div>

@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](https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports). 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.

---

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 3, 2022, 3:06pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/10 "2022-02-03T15:06:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![thiagomajesk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thiagomajesk/32/31904_2.png) [@thiagomajesk](https://forum.elixirforum.com/u/thiagomajesk)\
**Post date:** [February 3, 2022, 3:35pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/11 "2022-02-03T15:35:16Z")

</div>

Can you post your CSS build setup for those environments?

---

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 3, 2022, 5:51pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/12 "2022-02-03T17:51:10Z")

</div>

@thiagomajesk do you mean the following?

package.json

```elixir
  ...
  "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

```elixir
config :esbuild,
  version: "0.12.18",
  default: [
    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
    cd: Path.expand("../assets", __DIR__ ),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__ )}
  ]

```

In `dev.exs` I have some watchers that shouldn’t change it:

```elixir
config :wikir, WikirWeb.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__ )
    ]
  ]

```

Thanks!

---

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 3, 2022, 5:53pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/13 "2022-02-03T17:53:08Z")

</div>

By the way, konsalex [here](https://github.com/tailwindlabs/tailwindcss/issues/6602#issuecomment-1029161314) recommended me disable preflight and add preflight’s [source](https://unpkg.com/tailwindcss@3.0.18/src/css/preflight.css) manually without `background-color: transparent;`

---

<div class="post-metadata">

**Author:** ![thiagomajesk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thiagomajesk/32/31904_2.png) [@thiagomajesk](https://forum.elixirforum.com/u/thiagomajesk)\
**Post date:** [February 3, 2022, 7:02pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/14 "2022-02-03T19:02:08Z")

</div>

This is the setup of a a project I’m working on:

**package.json scripts:**

```json
"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 --postcss --watch",
    "deploy:stylesheets": "NODE_ENV=production tailwindcss --input=css/app.css --output=../priv/static/css/app.css --postcss --minify",
    "watch:static": "cpx 'static/**/*.*' '../priv/static' --verbose --watch",
    "deploy:static": "cpx 'static/**/*.*' '../priv/static' --verbose"
  },

```

**Esbuild config:**

```elixir
config :esbuild,
  version: "0.12.18",
  default: [
    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/js),
    cd: Path.expand("../assets", __DIR__ ),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__ )}
  ]

```

**Watchers config:**

```elixir
watchers: [
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npm: ["run", "watch", cd: Path.expand("../assets", __DIR__ )]
  ]

```

**Deploy task:**

```elixir
"assets.deploy": [
        "esbuild default --minify",
        "cmd --cd assets npm run deploy",
        "phx.digest"
      ]

```

Test this setup and see if it helps. One of the main differences from my setup is that I’m still storing everything on “/assets” and then copying to “priv/static”.

@hectorperez BTW, now that I’m recalling I had a similar problem with styles inside directives not getting picked up properly. I can’t repro it right now, but this would definitely be a subject to report on the Tailwind CSS repository. I think since V3 is using Jit as default, no styles are generated at all if they can’t be found, perhaps there’s a thread to pull there.

---

<div class="post-metadata">

**Author:** ![thiagomajesk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thiagomajesk/32/31904_2.png) [@thiagomajesk](https://forum.elixirforum.com/u/thiagomajesk)\
**Post date:** [February 4, 2022, 9:28pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/15 "2022-02-04T21:28:10Z")

</div>

Hey @hectorperez, I might have found another thing you can try… I’ve upgraded my deps to the latest Tailwindcss version which seems to have fixed the issue I had before with `@apply`: [Fix `@apply` order regression (in `addComponents`, `addUtilities`, ...) by RobinMalfait · Pull Request #7232 · tailwindlabs/tailwindcss · GitHub](https://github.com/tailwindlabs/tailwindcss/pull/7232).

---

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 5, 2022, 9:26am UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/16 "2022-02-05T09:26:24Z")

</div>

Hi @thiagomajesk, thank you for your messages.

I tried your setup — and Tailwind CSS last version — and it’s still not working.

---

<div class="post-metadata">

**Author:** ![thiagomajesk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thiagomajesk/32/31904_2.png) [@thiagomajesk](https://forum.elixirforum.com/u/thiagomajesk)\
**Post date:** [February 5, 2022, 2:16pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/17 "2022-02-05T14:16:40Z")

</div>

Hey @hectorperez, After publishing my previous comment I noticed a couple of issues with your configuration, for example using the `jit` and `purge` options that don’t exist in TailwindCSS V3 anymore. The correct configuration key for that is `content`. I also made a small repro for you to try which works properly: [https://github.com/thiagomajesk/tailwind-repro](https://github.com/thiagomajesk/tailwind-repro).

---

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 7, 2022, 10:29am UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/18 "2022-02-07T10:29:53Z")

</div>

Hi @thiagomajesk, thank you, your repo works!

However, it seems my app has a conflict or something that prevents it from working.

I replaced `jit` and `purge` with `content` and updated some libraries to the versions of your repo but it still doesn’t work in my app.

These are my files now. Maybe I missed something:

app.css

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

@import "./custom.css";

```

custom.css

```elixir
@layer base {
  button {
    @apply bg-blue-500 hover:bg-blue-300;
  }
}

```

config

```elixir
config :esbuild,
  version: "0.14.0",
  default: [
    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__ ),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__ )}
  ]

```

postcss.config.js

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

```

tailwind.config.js

```elixir
module.exports = {
  content: [
    "./js/**/*.js",
    "./css/**/*.*css",
    "../lib/*_web/**/*.*ex"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

```

dev.exs

```elixir
config :whatever, WhateverWeb.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npm: ["run", "watch", cd: Path.expand("../assets", __DIR__ )]
  ]

```

package.json

```elixir
{
  "private": "true",
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.6",
    "postcss-import": "^14.0.2",
    "tailwindcss": "^3.0.18",
    "alpinejs": "^3.4.2",
    "topbar": "^0.1.3"
  },
  "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",
    "watch": "NODE_ENV=development tailwindcss --input=css/app.css --output=../priv/static/assets/app.css --postcss --watch"
  }
}

```

I also updated `esbuild` to `~> 0.3` in `mix.exs`

Thanks!

---

<div class="post-metadata">

**Author:** ![thiagomajesk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thiagomajesk/32/31904_2.png) [@thiagomajesk](https://forum.elixirforum.com/u/thiagomajesk)\
**Post date:** [February 7, 2022, 1:21pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/19 "2022-02-07T13:21:15Z")

</div>

Have you tried diffing both projects to spot the differences? I think the repro shows that replacing the preflight defaults is indeed possible, so there’s no problem with Phoenix or Tailwind CSS setup.  
So, if the repro works and your app still doesn’t, check that everything is properly configured and that should be it. Unfortunately, there’s not much I can do to help you further than that, sorry 😉.

---

<div class="post-metadata">

**Author:** ![hectorperez](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/32/27441_2.png) [@hectorperez](https://forum.elixirforum.com/u/hectorperez)\
**Post date:** [February 8, 2022, 4:54pm UTC](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710/20 "2022-02-08T16:54:29Z")

</div>

@thiagomajesk I’ve tried diffing individual a few files.

Don’t worry, I’ll investigate a bit more and if I don’t find why it’s failing I’ll do [1] for now.  
Thank you for all your help!

[1]

> [@hectorperez](#):
>
> By the way, konsalex [here](https://github.com/tailwindlabs/tailwindcss/issues/6602#issuecomment-1029161314) recommended me disable preflight and add preflight’s [source](https://unpkg.com/tailwindcss@3.0.18/src/css/preflight.css) manually without `background-color: transparent;`

[Next page](https://forum.elixirforum.com/t/custom-css-not-replacing-tailwind-css-preflight/45710.md?page=2)