# CSS import below Tailwind does not work

**URL:** <https://forum.elixirforum.com/t/css-import-below-tailwind-does-not-work/54873>\
**Category:** Questions\
**Tags:** phoenix, css, tailwindcss\
**Created:** [March 27, 2023, 7:07pm UTC](https://forum.elixirforum.com/t/css-import-below-tailwind-does-not-work/54873 "2023-03-27T19:07:22Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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:** [March 28, 2023, 2:47pm UTC](https://forum.elixirforum.com/t/css-import-below-tailwind-does-not-work/54873/3 "2023-03-28T14:47:11Z")

</div>

Thanks @aiwaiwa.

Can I use @import within a @layer directive?

The following does NOT work:  
app.css

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

@layer base {
  @import "./markdown.css";
}

@layer utilities {
  @import "./code.css";
}

```

The following does NOT work either:  
app.css:

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

@import "./markdown.css";
@import "./code.css";

```

markdown.css:

```elixir
@layer base {
  .markdown h1 {
    @apply pb-2 text-4xl;
  }
  ...
}

```

code.css:

```elixir
@layer utilities {
  .highlight .hll {
    background-color: #49483e
  }
  ...

```

Yet, this **did work** :  
app.css:

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

@layer base {
  .markdown h1 {
    @apply pb-2 text-4xl;
  }
...
}

@layer utilities {
  .highlight .hll {
    background-color: #49483e
  }
...
}

```

So can’t I use @import inside @layer?  
Or am I doing something wrong?  
Thanks!

---

_[View the full topic](https://forum.elixirforum.com/t/css-import-below-tailwind-does-not-work/54873)._