.css extension is not working for Next.js 14 version #13142

givvemee · 2024-03-08T00:35:33Z

givvemee
Mar 8, 2024

Hi, I want to hear if anyone has been entered a case like me.
I was working on a simple project for storybook generating by next@latest --template typescript and the thing I firstly did was installing storybook and initiating it with tailwind css.
globals.css was located right under app dir, so storybook preview should getting it like import '../app/globals.css'; to make it in use.
After generating few storybook components, I faced a problem that tailwind is not working with another components under /app or /src at all.
Here's few code at that moment.

package.json

{
   ...
  },
  "dependencies": {
    "next": "14.1.2",
    "react": "^18",
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.6.17",
    "@storybook/addon-interactions": "^7.6.17",
    "@storybook/addon-links": "^7.6.17",
    "@storybook/addon-onboarding": "^1.0.11",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/blocks": "^7.6.17",
    "@storybook/nextjs": "^7.6.17",
    "@storybook/react": "^7.6.17",
    "@storybook/test": "^7.6.17",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^7.1.1",
    "@typescript-eslint/parser": "^7.1.1",
    "autoprefixer": "^10.4.18",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-tailwindcss": "^3.14.3",
    "postcss": "^8.4.35",
    "prettier": "^3.2.5",
    "storybook": "^7.6.17",
    "tailwindcss": "^3.4.1",
    "tsconfig-paths-webpack-plugin": "^4.1.0",
    "typescript": "^5"
  }
}

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        white: '#EFEFEF',
      },
    },
  },
  plugins: [],
};

postcss.config.ts

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

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    },
    "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

app/globals.css

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

body,
ul {
  margin: 0;
  padding: 0;
}

app/layout.tsx

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import '@/app/globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

app/page.tsx*

import FullScreenBox from '@/src/_test_/mock/components/fullScreenBox';
import { sortOfTailwindOrder } from '@/src/_test_/mock/static/sortOfTailwindNumber';

export default function Home() {
  return (
    <>
      <p className="text-xs underline">dd</p>
      <div>
        {sortOfTailwindOrder.map((order: number) => (
          <FullScreenBox key={order} order={order} />
        ))}
      </div>
    </>
  );
}

As you can see above, globals.css is correctly imported to app/layout.tsx but

      <p className="text-xs underline">dd</p>

is never applied.
There were 2 weird points.

As per margin: 0; padding: 0; has been correctly showing up in page.tsx components, then why tailwind preflight didn't?
How can it be applied to storybook, but how can it not be applied to general components?

I had to spend a lot of time to fix this problem and found a solution finally.
a) change extension of globals.css to globals.scss and installed sass
b) change extension of postcss.config.ts to postcss.config.js

Now Tailwind is properly working with general components, But I still do not have any idea why it happened and how was that 2 solutions working. ...

I know this got long text to read, but hope to be heard something from someone.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

.css extension is not working for Next.js 14 version #13142

{{title}}

Replies: 0 comments

Select a reply

.css extension is not working for Next.js 14 version #13142

givvemee Mar 8, 2024

Replies: 0 comments

givvemee
Mar 8, 2024