While developing my web application, I encountered an issue with the tailwind CSS styling. The styles seem to load correctly, but there is a slight delay before they take effect. This results in users seeing the unstyled version of the website briefly before the tailwind CSS classes kick in and apply the styles.
I'm puzzled as to why this happens since the project configurations are mostly default, set up using create-next-app, with only minor changes like adjusting the tsx settings (specifically changing moduleResolution from "bundler" to "node"). Even reverting back to "bundler" didn't resolve the issue.
In my tailwind.config.js:
import type { Config } from 'tailwindcss'
const config: Config = {
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: [],
}
export default config
In my tsconfig.json:
{
"compilerOptions": {
// compiler options here...
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
In my layout.tsx:
// code here...
In my Navbar.tsx:
// code here...
In my globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
I've researched this issue and came across a thread discussing similar problems, but none of the proposed solutions have worked for me. Any assistance on resolving this would be greatly appreciated. Thank you!