W
Wasp•5d ago
TheAdrian

Cannot apply unknown utility class

Hello Wasp version 0.15.2, trying to go through the getting started steps for the OpenSaaS template and I'm getting this error: 
[plugin:vite:css] [postcss] Cannot apply unknown utility class: lg:h-[calc(100vh_-_5.625rem)]
[plugin:vite:css] [postcss] Cannot apply unknown utility class: lg:h-[calc(100vh_-_5.625rem)]
Has anyone seen the above before and know how to fix it? Here is my postcss.config.cjs file: 
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};
When I initially tried creating an OpenSaaS template I was getting errors about how postcss was moved and I had to update to use tailwindcss/postcss so that's why I have the above change. But now I'm running into the error in the attached image Thanks, let me know if there's any other info I can provide
No description
3 Replies
kapa.ai
kapa.ai•5d ago
Hi @TheAdrian. 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 in the knowledge sources, I can offer some insights and suggestions to address your issue with the unknown utility class in Tailwind CSS when using Wasp. First, it's important to note that the error you're encountering is related to Tailwind CSS configuration, which is supported in Wasp. Here are a few steps you can try to resolve this issue: 1. Ensure you have the correct configuration files: Make sure you have both tailwind.config.cjs and postcss.config.cjs files in the root of your project. This is mentioned in the Wasp CSS Frameworks documentation. 2. Correct your postcss.config.cjs: The configuration you provided seems incorrect. According to the Wasp documentation, your postcss.config.cjs should look like this: 
   module.exports = {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   };
   
   module.exports = {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   };
Notice that it should use tailwindcss instead of '@tailwindcss/postcss'. 3. Check your tailwind.config.cjs: Ensure you have a proper tailwind.config.cjs file. It should look similar to this: 
   const { resolveProjectPath } = require('wasp/dev')

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   
   const { resolveProjectPath } = require('wasp/dev')

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],
     theme: {
       extend: {},
     },
     plugins: [],
   }
4. Restart Wasp: After making these changes, make sure to restart wasp start. As mentioned in the Wasp documentation, sometimes a restart is needed for Wasp to pick up the changes and enable Tailwind integration. 5. Import CSS file: Ensure that you have imported your main CSS file (e.g., Main.css) in your React components where you're using Tailwind classes. This was a common issue mentioned in a GitHub issue discussion. If you've followed these steps and are still encountering issues, it might be helpful to double-check your Wasp version and ensure it's up to date, as Tailwind support has improved in recent versions. If the problem persists, you may need to provide more details about your project structure and configuration files for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @TheAdrian, 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?
miho
miho•5d ago
It seems that Tailwind v4 arrived and the PostCSS team decided to do some breaking changes in their plugin that we install. and Tailwind related packages install Tailwind v4 if you don't specific Tailwind v3 in your package.json. Could you try: - wasp clean - add "tailwindcss": "^3.2.7" to your package.json - wasp start
TheAdrian
TheAdrianOP•4d ago
@miho that fixed it, thank you!

Did you find this page helpful?