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

sage
1

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

2

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.

3

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.

4

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

1 Like