LESSON 10 css set up issues--> not working

[AlexK020908]

Hi I have followed the setup guide from the official CSS tailwind getting started with nextJS, however, after the setup, nothing works

here is the code and the result:

export default function Header() {
    return (
        <div className="border-b-2">
            <ConnectButton moralisAuth={false} />
        </div>
    )
}

below are my configs + setups:

module.exports = {
    content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcssconfig:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

here is a link to my repo link:
https://github.com/AlexK020908?tab=repositories
please let me know if anyone can fix this issue, thanks a lot!

[krakxn]

I made a PR -- merge it to your GitHub repo; then, git pull to your local repo.

This should fix it. Cheers

[kasper-mol]

Hi Alex,

I had the same issue as you. For me deleting the .next folder and then running "yarn dev" did the trick. Could you please try that?

Cheers

[WillyEth]

I had the same issue and ran this solution it worked for me also... any thoughts on why this was required?

[kasper-mol]

@WillyEth Your build get's saved in the .next folder. If you have a build already in the .next folder before adding tailwind (which will likely be the case if you are following along with the lesson) this build will not include tailwind, hence it will not work. After deleting the folder and running yarn dev it takes a little longer because it needs to rebuild everything. But now tailwind is included so it will recognize the classes that are in tailwind