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
talss89
September 29, 2023, 7:30pm
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.
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.
ben
September 30, 2023, 3:27pm
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