Wasp-lang•2d ago

don't need to check this question only need kapa for debug :) will close after.

kapa I got an issue with the max width function "max-w-7x1" I need to overwrite this for my /webapp page so my own dashboard I need the full widht of the page and not limited by the max-w-7x1 styling. and that is 80 rem. but I can't find this styling anywhere in my folder. where can I find this and how can I overwrite this just for my /webapp page so it doesn't change for the landing page and stuff.

8 Replies

kapa.ai•2d ago

Hi @Hugoo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can define global CSS in src/client/Main.css and import it into your React code, ideally into the "rootComponent", so it is always loaded. In that global CSS, you can specify your own styles. You can find more information about this in the Wasp documentation (https://wasp-lang.dev/docs/project/client-config#defining-a-common-layout). If you are using a CSS framework like Tailwind, you might need to check their documentation on how to override specific styles. If the style is not found in your project, it might be coming from a CSS framework or library that you are using. Remember to be careful when overriding styles as it can affect other parts of your application. It might be a good idea to use a CSS class specific to your /webapp page to apply the style changes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Hugoo, 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?

Hugoo•2d ago

well that's the thing it's not in main.css and can't find it anywhere 🤣 @kapa.ai

kapa.ai•2d ago

Let me check the knowledge base for you. One moment! :books: Sorry @Hugoo, 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?

Hugoo•2d ago

I need to find the "max-width: 80rem;" in the codebase and change it, but I can't find it anywhere @kapa.ai I need to find the "max-width: 80rem;" in the codebase and change it, but I can't find it anywhere

kapa.ai•2d ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but the provided knowledge sources do not contain information about where the "max-width: 80rem;" is located in the Wasp codebase or how to change it. It's possible that this style is defined in a CSS file or a CSS-in-JS solution in your project. If you're using a code editor like VSCode, you can use the global search function (usually Ctrl+Shift+F or Cmd+Shift+F on Mac) to search for "max-width: 80rem;" across your entire project. If you still can't find it, it might be coming from a third-party library or a global style sheet. In that case, you would need to override it in your local styles. Remember to be careful when changing global styles as it can affect other parts of your application. It might be a good idea to use a CSS class specific to your /webapp page to apply the style changes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Hugoo, 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?

Hugoo•2d ago

I think it's a tailwind css predefined class.. how can I overwrite this prob in app.tsx right? @kapa.ai I think it's a tailwind css predefined class.. how can I overwrite this prob in app.tsx right? I changed something in the tailwind.config.cjs file by adding in the theme a custom class for max-width for my page, but it doesn't overwrite it while i'm using it in my page styling..

kapa.ai•2d ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To override a predefined class in Tailwind CSS, you can extend the default configuration in your tailwind.config.cjs file. However, it's important to note that the order of the classes in your HTML matters. If you have two classes that apply to the same CSS property, the one that comes last in your class list will be applied. Here's an example of how you can extend the default configuration:

module.exports = {
  theme: {
    extend: {
      maxWidth: {
        '7xl': 'yourValue', // replace 'yourValue' with your desired max-width
      },
    },
  },
  plugins: [],
}

module.exports = {
  theme: {
    extend: {
      maxWidth: {
        '7xl': 'yourValue', // replace 'yourValue' with your desired max-width
      },
    },
  },
  plugins: [],
}

After making changes to your tailwind.config.cjs file, you might need to restart your Wasp server to see the changes. This is sometimes needed to ensure that Wasp picks up the changes and enables Tailwind integration (source (https://wasp-lang.dev/docs/project/css-frameworks#tailwind)). If you're still having trouble, it might be helpful to check the Tailwind CSS documentation (https://tailwindcss.com/docs) or the Wasp CSS Frameworks documentation (https://wasp-lang.dev/docs/project/css-frameworks). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Hugoo, 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?

Hugoo•2d ago

thanks I solved it!

Gaming

Programming

don't need to check this question only need kapa for debug :) will close after.