-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
tailwind css is not working after deploy on vercel/netlify #8874
-
Last 2 days, I'm trying to figure out the problem in my google-clone project. It is working fine on my localhost but not working fine after deploying it on vercel/netlify.
GitHub link of my project: https://github.com/saiful-shaakil/new-google-clone
Vercel live site link : https://google-clone-using-nextjs.vercel.app/
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 4
I'm not quite sure whether or not this was the issue,
but in tailwind.config.js you specified the content path to be "./components/**/*.{js,ts,jsx,tsx}",
while the actual source folder was named Components.
Maybe try editing the fifth line of tailwind configuration file and see if it works?
Navigate to tailwind.config.js and replace the line below
"./components/**/*.{js,ts,jsx,tsx}",
with
"./Components/**/*.{js,ts,jsx,tsx}",
Replies: 17 comments 44 replies
-
I'm not quite sure whether or not this was the issue,
but in tailwind.config.js you specified the content path to be "./components/**/*.{js,ts,jsx,tsx}",
while the actual source folder was named Components.
Maybe try editing the fifth line of tailwind configuration file and see if it works?
Navigate to tailwind.config.js and replace the line below
"./components/**/*.{js,ts,jsx,tsx}",
with
"./Components/**/*.{js,ts,jsx,tsx}",
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 40 -
👎 3 -
❤️ 22
-
thanks for saving my days!
Beta Was this translation helpful? Give feedback.
All reactions
-
Thanks a lot ...
Beta Was this translation helpful? Give feedback.
All reactions
-
thanks a lot sir , i am also suffering 3 day
Beta Was this translation helpful? Give feedback.
All reactions
-
Thank you so much.
Beta Was this translation helpful? Give feedback.
All reactions
-
With all the AI, All the Stack overflow this answer should be everywhere! It was my fix as well in 2025
Beta Was this translation helpful? Give feedback.
All reactions
-
Thanks a lot. you made my day. I was stuck for two days. I found this article and solved the problem.
Beta Was this translation helpful? Give feedback.
All reactions
-
Thanks so much its also work for me
Beta Was this translation helpful? Give feedback.
All reactions
-
thank you so much ..
Beta Was this translation helpful? Give feedback.
All reactions
-
lol. found the same issue. still sometimes you need google to resolve your issue. Otherwise, I was too dependent on chatGPT. Thanks a lot.
Beta Was this translation helpful? Give feedback.
All reactions
-
Hey guys, good afternoon!, can anyone help me? I have the same problem, but I couldn't solve it :(
GitHub link of my project: https://github.com/wilkker/page_tailwindcss
Vercel live site link : https://pagina-npr5jc8v7-wilkker.vercel.app/
Beta Was this translation helpful? Give feedback.
All reactions
-
Your live site link seems to be forcing me to login. Regardless, consider checking your paths. If your webroot is set to src, then the <link> to the CSS in src/index.html should be href="/output.css" or href="./output.css":
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page</title> - <link rel="stylesheet" href="/src/output.css"> + <link rel="stylesheet" href="/output.css"> </head>
Beta Was this translation helpful? Give feedback.
All reactions
-
nextjs 14
if you are facing this issue in nextjs
Navigate to tailwind.config.ts and replace the line below and replace the content
content: [
"./Components/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}",
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 5
-
It's work
Beta Was this translation helpful? Give feedback.
All reactions
-
Its working now, thank you
Beta Was this translation helpful? Give feedback.
All reactions
-
Thank you brother
Beta Was this translation helpful? Give feedback.
All reactions
-
Hey guys, good afternoon!, can anyone help me? I am also having the same problem, but I couldn't solve it :(
GitHub link of my project: https://github.com/PriyankaSoni03/Razorpay-Clone
Vercel live site link : https://razorpay-clone-gz6j-git-main-priyankasoni03s-projects.vercel.app/
Beta Was this translation helpful? Give feedback.
All reactions
-
@PriyankaSoni03 . the build command is missing from your package.json
Beta Was this translation helpful? Give feedback.
All reactions
-
Can you please specify that what command or lines should I add. As I am bit confused in this
Beta Was this translation helpful? Give feedback.
All reactions
-
i added this is package.json file
and then run **npm run build**
{
"scripts": {
"start": "vite",
"build": "vite build"
},
"devDependencies": {
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.1",
"vite": "^5.2.6"
}
}
After build process is completed , you will see dist folder .There you will see the build files that you can upload to any hosting. You can check tutorials on how to deploy static apps in vercel .
Beta Was this translation helpful? Give feedback.
All reactions
-
Thank You so much!! Its now working.
Beta Was this translation helpful? Give feedback.
All reactions
-
Beta Was this translation helpful? Give feedback.
All reactions
-
hi all
i bulid the project react+taiwind but when i deploy the project tailwind is not working
here my tailwind config
/** @type {import('tailwindcss').Config} /
export default {
content: [
"./index.html",
"./src/**/.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
github link:https://github.com/mpal15/Book_explorer.git
vercel deploy link:https://book-explorer-woad.vercel.app/
Beta Was this translation helpful? Give feedback.
All reactions
-
Step 1: Add this in package.json file
{
"scripts": {
"start": "vite",
"build": "vite build"
},
"devDependencies": {
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.1",
"vite": "^5.2.6"
}
}
Step 2: and then run npm run build
Step 3: After build process is completed , you will see "dist" named folder .There you will see the build files that you can upload to any hosting platform.
Alternative to the above steps is just host it on netlify, it will host your website directly by making dist file.
Hope this helps!!
Beta Was this translation helpful? Give feedback.
All reactions
-
Beta Was this translation helpful? Give feedback.
All reactions
-
check your tailwind installation , redo it , check after running npm run build , then npm run preview if its working or not. Make sure you are importing all the necessary CSS files
Beta Was this translation helpful? Give feedback.
All reactions
-
Beta Was this translation helpful? Give feedback.
All reactions
-
Beta Was this translation helpful? Give feedback.
All reactions
-
I had the same issue...named my folder Components and had "./components/**/*.{js,ts,jsx,tsx}", in the config file, just changed it to a capital C and all worked upon deployment
Beta Was this translation helpful? Give feedback.
All reactions
-
Hi all!
After deploying my page to netlify I ran into a few problems like 404 error, or a blank page being displayed - I managed them (one due to my repository being nested inside another folder, blank display - I removed the dist folder from git.ignore). The last one I can’t overcome - my tailwind/css isn’t applied at all.
Path to the css in index.html seems to be correct, the folder structure of dist too, all the tailwind and vite config as well as pacage.json seem to be correct too, all is up to date. Since my repository is nested inside another folder my build settings are as below:
Screenshot 2024年12月25日 at 20 05 39
It seems like I’ve tried everything and can not find the source of the issue, could you please take a look and help me?
Here is my repository: GitHub - MagdaMie/website
and here my website: https://profound-dolphin-3faf78.netlify.app/
Beta Was this translation helpful? Give feedback.
All reactions
-
Somebody can help me? Thanks
Same iussue :(
github link: https://github.com/SudatiSimone/sito-imgigi
deploy link: https://sito-imgigi.vercel.app/
Beta Was this translation helpful? Give feedback.
All reactions
-
Beta Was this translation helpful? Give feedback.
All reactions
-
I'm building a UI package based on TailwindCSS that provides components for Astro/React/Svelte/Vue. How can I ensure that in projects using this package, the TailwindCSS build only scans the components from the Components folder that have actually been imported at least once in the project?
If I specify the node_modules/mypackage/components folder as a source, then both the Input and Button components end up in the final generated output - even if, for example, the Input component wasn't used a single time.
I'm interested in a solution compatible with both v3 and v4 for compatibility reasons.
Beta Was this translation helpful? Give feedback.