# Unable to use @import after @tailwind on app.css

**URL:** https://discourse.roots.io/t/unable-to-use-import-after-tailwind-on-app-css/26048
**Category:** sage
**Tags:** sage10
**Created:** 2023-09-29T16:57:47Z
**Posts:** 4

## Post 1 by @Thomas_Popoff — 2023-09-29T16:57:47Z

Hello,

I just started a new sage 10.7.0 project, and I’m struggling including .css files in app.css.

This is partially working but I can not use `@apply text-3xl:` (or tailwind class) in typo.css, not working.

```
@import 'common/typo.css';

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

If I change the order, it’s like typo.css is not even read.

Did I miss something ?  
Thank you for your time

---

## Post 2 by @talss89 — 2023-09-29T19:30:17Z

Hi @Thomas_Popoff,

Can you share your `typo.css` file? I’ve just tried to replicate this on Sage 10.7.0 with:

_app.css_

```
@import 'common/typo.css';

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

_common/typo.css_

```
body {
    @apply text-3xl;
}
```

The body font size is now 3xl. It appears to work as expected.

---

## Post 3 by @Thomas_Popoff — 2023-09-30T06:37:56Z

my typo.css

```
h1 {
  @apply text-3xl; // not working
  @apply !text-3xl; // working
}
```

It seems because you need to import css before @tailwind rules, some rules are overwritten by @tailwind default.  
I did your example, it’s working on body tag. But not on h1.

---

## Post 4 by @ben — 2023-09-30T15:27:07Z

You’d want to add those to the base layer, see how the Tailwind docs cover this:

[https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles](https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles)