Wasp-lang•2mo ago

Unknown at rule @tailwindcss(unknownAtRules)

I got this error and im trying to apply the Satoshi font and also getting some styles from Main.css but its no working, i can get the theme config from tailwind.config but not the rules from Main.css file. Im using opensass templante.

8 Replies

kapa.ai•2mo ago

Hi @Julian Mendez. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided, it seems like you might be facing an issue with importing your Main.css file into your main page component. This issue was discussed in a Github issue (https://github.com/wasp-lang/wasp/issues/1249) where a user was unable to apply Tailwind classes. The problem was resolved when they realized they hadn't imported Main.css into their MainPage.tsx. Please ensure that you have correctly imported your Main.css file into your main page component. If you're using a .tsx file, your import statement should look something like this:

import './Main.css';

import './Main.css';

Also, make sure that you have correctly configured your tailwind.config.cjs and postcss.config.cjs files as per the Wasp documentation (https://wasp-lang.dev/docs/project/css-frameworks#tailwind). If you've made changes to these files or added them while your Wasp server was running, you might need to restart it for the changes to take effect. This is because Wasp sometimes needs a restart to pick up changes and enable Tailwind integration, as mentioned in the Wasp documentation (https://wasp-lang.dev/docs/project/css-frameworks#tailwind). If you're still facing issues, please provide more details or consider reaching out to the Wasp community for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Julian Mendez, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

blair•2mo ago

The first one is because your code editor (vscode?) thinks you're writing plain css not tailwindcss. If it's vscode, install the tailwindcss extension and set the file language to be tailwind css

martinsos•2mo ago

I don't quite get what is happening. Can you eplxain it in more details: whas it working before? If yes, at which point did it stop working? What have you tried so far and what was the result of that? What does it mean you are applying satoshi font, how did you try to do that? And so on

Julian MendezOP•2mo ago

Actually i found that this is an error related to OpenSass cause if you go to the oficial page https://opensaas.sh/admin/forms/form-elements and compare the same calendar component from tailadmin https://react-demo.tailadmin.com/forms/form-elements the styles components are so diferents, do you know how to fixed and aply the same styles from tailadmin at least for calendar comp?

Open SaaS

Free, open-source SaaS boilerplate starter for React & NodeJS.

miho•2mo ago

@Vinny (@Wasp) one for you

Vinny (@Wasp)•2mo ago

it looks to me like they've changed/updated tailadmin

miho•2mo ago

Do we need to update Open Saas to have the latest version / code / classes?

Vinny (@Wasp)•2mo ago

it's just a zip package with react components. I geuss we could update it, but I think it's not really a priority. @Julian Mendez I see what you mean now that on the template the Satoshi font isn't being used. Give me some time to try and figure out what the issue is and I'll report back. ok @Julian Mendez what you have to do is put the fonts that are currently in src/client/fonts into public/fonts and then add this to your Main.css file:

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

then in your components you can use font-satoshi to get the Satoshi font and if you want to use it as the default for your entire app, you can try:

:root {
  font-family: 'Satoshi', sans-serif;
}

:root {
  font-family: 'Satoshi', sans-serif;
}

Gaming

Programming

Unknown at rule @tailwindcss(unknownAtRules)