Sysinfo:
> Windows 11
> Node: v18.16.0
> Next: 13.4.13
> Tested Browser: Firefox, Chrome.
Step to Reproduce
To recreate the issue, I created a NextJS project using the command npx create-next-app tezz with specific options selected:
Would you like to use TypeScript? ... **No** / Yes
Would you like to use ESLint? ... **No** / Yes
Would you like to use Tailwind CSS? ... No / **Yes**
Would you like to use `src/` directory? ... **No** / Yes
Would you like to use App Router? (recommended) ... **No** / Yes
Would you like to customize the default import alias? ... **No** / Yes
Creating a new Next.js app in X:\web\tezz.
Using npm.
Initializing project with template: default-tw
Installing dependencies:
react
react-dom
next
tailwindcss
postcss
autoprefixer
Upon running the project and attempting to compile it for production, I encountered issues with Tailwinds not applying properly. Only the font and some dark background elements were functioning, while other components such as buttons were not displaying correctly. The console displayed the following log message:
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9aeeffe0e0daaab4abb4aa">[email protected]</a> dev
> next dev
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 322 ms (18 modules)
- wait compiling...
- event compiled client and server successfully in 288 ms (18 modules)
- wait compiling / (client and server)...
- wait compiling /_error (client and server)...
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
- event compiled client and server successfully in 3.8s (211 modules)
Although a warning about utility classes was issued, my tailwind.config.js file seemed correct:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
plugins: [],
}
_app.js
import '@/styles/globals.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
Interestingly, changing the Tailwind version from 3.3.3 to 3.1.8 resolved all the issues, but versions 3.2.0 and above caused CSS problems.
The initial dependencies before the Tailwind version change were:
"dependencies": {
"autoprefixer": "10.4.14",
"next": "13.4.13",
"postcss": "8.4.27",
"react": "18.2.0",
"react-dom": "18.2.0",
"tailwindcss": "3.3.3"
}
Attachment
*) This is the rendered page with tailwind 3.3.3
*) This is the rendered page with tailwind 3.1.8
I welcome any tips or recommendations as I am relatively inexperienced in frontend development. Thank you!
Resolved by switching back to Tailwind version 3.1.8 as mentioned earlier.