Next.js Discord

Discord Forum

Applying Styles

Answered
Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
Hello, I just wanted to know if that is the only way to apply styles (as a variable) or if there is a way to simply import the css file and automatically apply the styles. https://img.walkaisa.dev/bEkHFYm1ZW
Answered by Westphalian Dachsbracke
Yes, you can just add the styles to the global.css file for example, and then use it anywhere in your code i belive
View full answer

64 Replies

Westphalian Dachsbracke
Yes, you can just add the styles to the global.css file for example, and then use it anywhere in your code i belive
Answer
Barbary LionOP
So there is no way to keep them separated like in react?
Westphalian Dachsbracke
But thats not super good, that leads to many problems down the line, mainly that its hard to maintain the styles and you can get name-collisions, meaning that the same class name is used for many places like ".card" for example
Not if you use .module.css no i dont think so
Barbary LionOP
Okay, can you tell me what the benefit of that is instead of naming it as a normal module
Westphalian Dachsbracke
But if you try to rename you css file to "page.css" and then in your react code here just do 

import "./page.css"


That might work
The benifites of using css modules?
Barbary LionOP
yes
Westphalian Dachsbracke
If you inspect the actual html in you browser and look at you class names, you will see that they have a bit of weird name, its not just "main" it will be something like "page_main_agt5b7" which makes it unique
So if you have another css file with the class name main, and use it for a footer for example, these two classes would never effect each other
Wich makes it very nice to work with as your cade scales
Barbary LionOP
Oh yeah that sounds really nice and useful, thank you ^^
Westphalian Dachsbracke
No worries 🙏
Hopefully it solves your problem
But was there a reason that you did not like the module thing that made you want to use it as a "normal" react app? Or was it mainly just annoying?
Barbary LionOP
Yeah defintely but I acutally have one more issue. I use a image in my code but it's sadly stretched in the mobile view. On React it's not.
Left react, right next https://img.walkaisa.dev/UQyfFY3O8Q
I always want to use the best practice and didn't knew that way.
Ofc I'll now use the variable way ^^
@Barbary Lion Left react, right next https://img.walkaisa.dev/UQyfFY3O8Q
Westphalian Dachsbracke
Dont think this is a next issue. Can you send me an image of the code for you image 🙏
Barbary LionOP
Ofc
@Barbary Lion No, I'm just new to Next 😅
Westphalian Dachsbracke
Cool! 👌
Barbary LionOP
# page.tsx
import Image from "next/image";
import styles from "./page.module.scss";

import Banner from "../../public/images/banner.png";

export default function Home() {
    return (
        <main className={styles.main}>
            <Image src={Banner} alt="Banner" className={styles.banner} />

            <form action="http://localhost:3000/callback" method="post">
                <input type="email" className={styles.email_input} name="email" placeholder="Enter your email" required />
                <button type="submit" className={styles.continue_button}>
                    Continue
                </button>
            </form>
        </main>
    );
}


# page.module.scss
.main {
    text-align: center;

    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}

.banner {
    max-width: calc(100% - 2rem);
    padding: 1rem;
}

.email_input {
    width: 300px;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background-color: #333;
    border: 1px solid transparent;
    color: #ffffff;
    caret-color: var(--accent-color);
    transition: all 0.25s;

    &:hover {
        background-color: #444;
        cursor: pointer;
        border: 1px solid var(--accent-color);
        box-shadow: 0 0 10px var(--accent-color);
    }

    &:focus {
        outline: none;
        border: 1px solid var(--accent-color);
        box-shadow: 0 0 10px var(--accent-color);
    }
}

.continue_button {
    padding: 10px 20px;
    border: none;
    border-radius: 0.3em;
    background-color: var(--accent-color);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.25s;

    &:hover {
        background-color: #940e2f;
        box-shadow: 0 0 10px var(--accent-color);
    }
}
# global.scss
:root {
    --background-color: #121212;
    --accent-color: #be123c;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: var(--background-color);
    font-family: Arial, sans-serif;
}
Westphalian Dachsbracke
Okej, I think it could be a bit todo with that the Image component in next does work a bit different, so indirectly it might be a next issue 😅 its hard to terminane the exact fix, but my two ideas are either to just add widht:100% to the .banneer class, or add object-fit: cover to it
Or both 😅
These CSS things are always super hard to debug with out just playing around with it
Let me know if either one of those work :sunglasses_1:
Barbary LionOP
Yeah let me try 🙂
@Barbary Lion Where do I put the object-fit?
Westphalian Dachsbracke
The banner class
Barbary LionOP
Yeah my bad 😂 Sry
Westphalian Dachsbracke
no wrries
Barbary LionOP
Not stretched but too long now https://img.walkaisa.dev/YrGil5fCI2
@Westphalian Dachsbracke no wrries
Barbary LionOP
So both ways are not working 😦
Westphalian Dachsbracke
ohhh nvm, try object-fit: contain instead
sorry, I always mix them up
Barbary LionOP
Yeah that acutally fixed it but do you know where that extra gap between the logo and the input field comes? https://img.walkaisa.dev/xjXgQvpNxn
Right is next
@Westphalian Dachsbracke sorry, I always mix them up
Barbary LionOP
All good 🙂
Barbary LionOP
So what I found is, that on the Next version, the blue box around the logo is bigger than on the react one

Next:
https://img.walkaisa.dev/dLzzI2itOr

React:
https://img.walkaisa.dev/ZrI3F8p6yk
@Westphalian Dachsbracke ohhh nvm, try object-fit: contain instead
Barbary LionOP
For some reason "height: auto" solved it.

.banner {
    max-width: calc(100% - 2rem);
    height: auto;
    padding: 1rem;
}
Barbary LionOP
@Westphalian Dachsbracke Sorry for disturbing you but could you help me with something really quick pls?
@Barbary Lion So what I found is, that on the Next version, the blue box around the logo is bigger than on the react one Next: https://img.walkaisa.dev/dLzzI2itOr React: https://img.walkaisa.dev/ZrI3F8p6yk
Westphalian Dachsbracke
Yeah I mean next images do work differently tbh, im no pro on it either, it takes some reading into
@Westphalian Dachsbracke Yeah sure, whats up?
Barbary LionOP
So I just added tailwindcss to my project and that broke some stylings due to preflight. I don't want to fully disable it as it's primarily useful but how I can work with it and keep my current styles?
Barbary LionOP
As you see, it's not centered anymore and all the styles of the button and the input doesn't match the result before anymore https://img.walkaisa.dev/4F3z9Kbyci
With tailwindcss https://img.walkaisa.dev/NT2ufPYYzt
without https://img.walkaisa.dev/V9WyJsgQxs
I found out it's due to this https://img.walkaisa.dev/BxIsBcRgqS
Westphalian Dachsbracke
Yeah its hard for me to point down the excact issue, but im guessing that you just need center it? With flex box or something that you already seem to have around it? 🤔
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
    corePlugins: {
        preflight: true
    },
    theme: {
        extend: {}
    },
    plugins: []
};
https://img.walkaisa.dev/XzJTIB7G3I
@Barbary Lion Solved it 🙂 Could you help me to solve this warning? https://img.walkaisa.dev/qKGxUyfyf6
Westphalian Dachsbracke
That warning is just saying that you are bot using tailwind anywhere in your code
or any tailwind classes that is
Are you using any tailwind classes?
Barbary LionOP
Yes
No you're right, I actually wasn't xD
Thanks that solved it 😂
Westphalian Dachsbracke