tailwind css is not working after deploy on vercel/netlify

[saiful-shaakil]

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/

[ichenglin]

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}",

[nazish-16]

Thanks a lot mate

[SpooRe91]

Thanks, that solved the problem, adding a mental note :)

[pedrocnadais]

thanks bro, this also fixed my problem :)

[JAWAD-ASGHAR]

thanks for saving my days!

[HasiburRahman-hr11]

Thanks a lot ...

[salimalsazu]

Thanks a lot. you made my day. I was stuck for two days. I found this article and solved the problem.

[ankitbourasi0]

Thanks so much its also work for me

[Shohanur-Shohan]

thank you so much ..

[ngoyal100894]

lol. found the same issue. still sometimes you need google to resolve your issue. Otherwise, I was too dependent on chatGPT. Thanks a lot.

[wilkker]

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/

[wongjn]

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>

[zainwaseem]

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}",
  ],

[DarkAsfu]

It's work

[ArshadSherif]

Its working now, thank you

[ahsantahirr]

Thank you brother

[PriyankaSoni03]

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/

[diptnc]

@PriyankaSoni03 . the build command is missing from your package.json

[PriyankaSoni03]

Can you please specify that what command or lines should I add. As I am bit confused in this

[diptnc]

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 .

[PriyankaSoni03]

Thank You so much!! Its now working.

[SaqlainKazmi]

If you are using tailwind then check you folder name if it is camel case then go to tailwind.config.ts and set your folder name this is find the content and check the spelling ( content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './Components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', )

…

On Fri, 5 Apr 2024 at 7:36 PM, PriyankaSoni03 ***@***.***> wrote: Can you please specify that what command or lines should I add. As I am bit confused in this — Reply to this email directly, view it on GitHub <#8874 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMNMC6AJG3QS3OZDHE6F5CDY32ZIRAVCNFSM532DHJZ2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSMBSGI2TAOI> . You are receiving this because you are subscribed to this thread.Message ID: <tailwindlabs/tailwindcss/repo-discussions/8874/comments/9022509@ github.com>

[mpal15]

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/

[PriyankaSoni03]

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!!

[mpal15]

thank for help but is not working github link:https://github.com/mpal15/Book_explorer.git deploy link:https://book-explorer-red.vercel.app/

…

On Thu, 11 Apr 2024 at 18:46, PriyankaSoni03 ***@***.***> wrote: 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!! — Reply to this email directly, view it on GitHub <#8874 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AO2FGVZNPK2M22RPT3ZFLMLY42ELZAVCNFSM532DHJZ2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSMBYGQYTEMY> . You are receiving this because you commented.Message ID: ***@***.*** com>

[diptnc]

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

[SaqlainKazmi]

The code is in your master branch vercel did’t accept code code from master brach push your code to main instead of master

…

On Thu, 11 Apr 2024 at 7:06 PM, Mohit Pal ***@***.***> wrote: thank for help but is not working github link:https://github.com/mpal15/Book_explorer.git deploy link:https://book-explorer-red.vercel.app/ On Thu, 11 Apr 2024 at 18:46, PriyankaSoni03 ***@***.***> wrote: > 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!! > > — > Reply to this email directly, view it on GitHub > < #8874 (reply in thread)>, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AO2FGVZNPK2M22RPT3ZFLMLY42ELZAVCNFSM532DHJZ2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSMBYGQYTEMY> > . > You are receiving this because you commented.Message ID: > ***@***.*** > com> > — Reply to this email directly, view it on GitHub <#8874 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMNMC6A6UDXFYTUMO5CHSR3Y42KGLAVCNFSM532DHJZ2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSMBYGQ3TOMY> . You are receiving this because you are subscribed to this thread.Message ID: <tailwindlabs/tailwindcss/repo-discussions/8874/comments/9084773@ github.com>

[SaqlainKazmi]

If your css not working then ( If you are using tailwind then check you folder name if it is camel case then go to tailwind.config.ts and set your folder name this is find the content and check the spelling ( content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './Components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ) ) On Thu, 11 Apr 2024 at 7:35 PM, Saqlain Kazmi ***@***.***> wrote:

…

The code is in your master branch vercel did’t accept code code from master brach push your code to main instead of master On Thu, 11 Apr 2024 at 7:06 PM, Mohit Pal ***@***.***> wrote: > thank for help but is not working > github link:https://github.com/mpal15/Book_explorer.git > deploy link:https://book-explorer-red.vercel.app/ > > On Thu, 11 Apr 2024 at 18:46, PriyankaSoni03 ***@***.***> > wrote: > > > 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!! > > > > — > > Reply to this email directly, view it on GitHub > > < > #8874 (reply in thread)>, > > > or unsubscribe > > < > https://github.com/notifications/unsubscribe-auth/AO2FGVZNPK2M22RPT3ZFLMLY42ELZAVCNFSM532DHJZ2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSMBYGQYTEMY> > > > . > > You are receiving this because you commented.Message ID: > > ***@***.*** > > com> > > > > — > Reply to this email directly, view it on GitHub > <#8874 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AMNMC6A6UDXFYTUMO5CHSR3Y42KGLAVCNFSM532DHJZ2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSMBYGQ3TOMY> > . > You are receiving this because you are subscribed to this thread.Message > ID: <tailwindlabs/tailwindcss/repo-discussions/8874/comments/9084773@ > github.com> >

[jbmarroq]

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

[MagdaMie]

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:

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/