Added app folder - Tailwind doesn't work properly

Unanswered

Alligator mississippiensis posted this in #help-forum

Alligator mississippiensisOP

2024-03-12T20:10:46.000Z

I have started using an app folder in my existing project. Tailwind doesn't work properly on my app folder.
The classes are being applied, but the design seems different, not as it should.

The steps I've taken:
1) added an app folder to the root of my existing project with the following structure:

app/
    layout.js
    test/
        page.js

2) imported my globals.css file in the root layout of the app folder

import '../styles/globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

3) updated my tailwind config:

  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/preline/preline.js',
  ],

Next.js and Tailwind versions:
"next": "^14.1.3",
"tailwindcss": "^3.3.3"

8 Replies

Barbary Lion

2024-03-12T20:27:25.000Z

what does your globals.css file look like?

you need tailwind added in your globals.css file

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

html,
body {
  height: 100vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

....

@Barbary Lion what does your globals.css file look like?

Alligator mississippiensisOP

2024-03-12T20:37:05.000Z

I have this:

&913086567042674719 base;
&913086567042674719 components;
&913086567042674719 utilities;

And below just global css classes that have nothing to do with tailwind.
Tailwind is working fine on pages folder

Barbary Lion

2024-03-12T21:35:38.000Z

hmm should work fine im using the same setup. probably just using tailwind wrong what doesnt show up?

@Alligator mississippiensis I have started using an app folder in my existing project. Tailwind doesn't work properly on my app folder. The classes are being applied, but the design seems different, not as it should. **The steps I've taken:** 1) added an app folder to the root of my existing project with the following structure: `` app/ layout.js test/ page.js `` 2) imported my globals.css file in the root layout of the app folder import '../styles/globals.css'; export default function RootLayout({ children }) { return ( <html lang="en"> <body> {children} </body> </html> ); } 3) updated my tailwind config: content: [ './pages/**/*.{js,ts,jsx,tsx}', './app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './node_modules/preline/preline.js', ], Next.js and Tailwind versions: "next": "^14.1.3", "tailwindcss": "^3.3.3"

American Chinchilla

2024-03-12T21:40:03.000Z

you can try using latest tailwind version

!=tgt

2024-03-13T06:03:26.000Z

it there a postcss.config.js file in your project's root?

if not, make one and put the following inside. You might need to install the autoprefixer package.

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

@American Chinchilla you can try using latest tailwind version

Alligator mississippiensisOP

2024-03-13T17:54:33.000Z

@Barbary Lion @!=tgt
Thank you for you help. The issue turned out to be not setting fonts properly for the app router, and that's what made the page look weird. It was not tailwind.