Vite and Tailwindcss fails on Netlify, works on local

Support
,
1

Hi,
I’m trying to host a page using Vite and Tailwindcss for the first time.
I’m at the stage when the HTML file is loaded after the page is deployed. Tailwindcss is not active at all (locally works fine). I am still trying to figure out what I can change to fix this on Netlify. I found this solution Facing redirect issue(newbie with netlify) - #2 by coelmay (my vite.config has different entries), but I can’t adapt it to my repo, and I don’t know if this is the answer to my problem at all. I’m using this repository: GitHub - YoannaPo/Empowering-Women: Created design using Figma and then fully responsive layout with Tailwind CSS3.

site: https://empowering-women-layout.netlify.app

deploy_summary
deploy_summary913×534 18.9 KB

DEPLOY LOGS:

12:24:46 AM: build-image version: 7fd17ad8d79d1952d384fb389d8e787becff0260 (focal)
12:24:46 AM: buildbot version: 7fd17ad8d79d1952d384fb389d8e787becff0260
12:24:46 AM: Building without cache
12:24:46 AM: Starting to prepare the repo for build
12:24:46 AM: No cached dependencies found. Cloning fresh repo
12:24:46 AM: git clone --filter=blob:none https://github.com/YoannaPo/Empowering-Women
12:24:46 AM: Preparing Git Reference refs/heads/main
12:24:46 AM: Parsing package.json dependencies
12:24:48 AM: Different build dir detected, going to use the one specified in the Netlify configuration file: 'tailwindcss3' versus 'tailwindcss3/' in the Netlify UI
12:24:48 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'tailwindcss3' versus '' in the Netlify UI
12:24:48 AM: Starting build script
12:24:48 AM: Installing dependencies
12:24:48 AM: Python version set to 2.7
12:24:48 AM: v16.19.1 is already installed.
12:24:48 AM: Now using node v16.19.1 (npm v8.19.3)
12:24:48 AM: Enabling Node.js Corepack
12:24:49 AM: Started restoring cached build plugins
12:24:49 AM: Finished restoring cached build plugins
12:24:49 AM: Attempting Ruby version 2.7.2, read from environment
12:24:49 AM: Using Ruby version 2.7.2
12:24:49 AM: Using PHP version 8.0
12:24:49 AM: Started restoring cached corepack dependencies
12:24:49 AM: Finished restoring cached corepack dependencies
12:24:49 AM: No npm workspaces detected
12:24:49 AM: Started restoring cached node modules
12:24:49 AM: Finished restoring cached node modules
12:24:50 AM: Installing npm packages using npm version 8.19.3
12:24:51 AM: added 76 packages, and audited 77 packages in 963ms
12:24:51 AM: 19 packages are looking for funding
12:24:51 AM:   run `npm fund` for details
12:24:51 AM: found 0 vulnerabilities
12:24:51 AM: npm packages installed
12:24:51 AM: Started restoring cached go cache
12:24:51 AM: Finished restoring cached go cache
12:24:51 AM: go version go1.19.7 linux/amd64
12:24:51 AM: Detected 1 framework(s)
12:24:51 AM: "vite" at version "3.2.5"
12:24:51 AM: Section completed: initializing
12:24:53 AM: ​
12:24:53 AM:   Netlify Build                                                 
12:24:53 AM: ────────────────────────────────────────────────────────────────
12:24:53 AM: ​
12:24:53 AM: ❯ Version
12:24:53 AM:   @netlify/build 29.6.4
12:24:53 AM: ​
12:24:53 AM: ❯ Flags
12:24:53 AM:   baseRelDir: true
12:24:53 AM:   buildId: 640d1bccf99e4b03447019b6
12:24:53 AM:   deployId: 640d1bccf99e4b03447019b8
12:24:53 AM: ​
12:24:53 AM: ❯ Current directory
12:24:53 AM:   /opt/build/repo/tailwindcss3
12:24:53 AM: ​
12:24:53 AM: ❯ Config file
12:24:53 AM:   No config file was defined: using default values.
12:24:53 AM: ​
12:24:53 AM: ❯ Context
12:24:53 AM:   production
12:24:53 AM: ​
12:24:53 AM:   1. Build command from Netlify app                             
12:24:53 AM: ────────────────────────────────────────────────────────────────
12:24:53 AM: ​
12:24:53 AM: $ CI= npm run build
12:24:53 AM: > tailwindcss3@0.0.0 build
12:24:53 AM: > vite build
12:24:53 AM: vite v3.2.5 building for production...
12:24:53 AM: transforming...
12:24:54 AM: warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
12:24:54 AM: warn - Update your configuration file to eliminate this warning.
12:24:54 AM: warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources
12:24:54 AM: ✓ 9 modules transformed.
12:24:54 AM: Starting post processing
12:24:54 AM: rendering chunks...
12:24:54 AM: dist/assets/javascript.8dac5379.svg   0.97 KiB
12:24:54 AM: dist/index.html                       26.50 KiB
12:24:54 AM: Post processing - HTML
12:24:54 AM: dist/assets/index.d89f61db.js         1.40 KiB / gzip: 0.73 KiB
12:24:54 AM: dist/assets/index.200c25d9.css        14.34 KiB / gzip: 3.68 KiB
12:24:54 AM: ​
12:24:54 AM: (build.command completed in 1.1s)
12:24:54 AM: Post processing - header rules
12:24:54 AM: ​
12:24:54 AM:   2. Deploy site                                                
12:24:54 AM: ────────────────────────────────────────────────────────────────
12:24:54 AM: Post processing - redirect rules
12:24:54 AM: ​
12:24:54 AM: Starting to deploy site from 'tailwindcss3'
12:24:54 AM: Calculating files to upload
12:24:55 AM: Post processing done
12:24:54 AM: 0 new files to upload
12:24:54 AM: 0 new functions to upload
12:24:54 AM: Section completed: deploying
12:24:55 AM: Section completed: postprocessing
12:24:54 AM: Site deploy was successfully initiated
12:24:54 AM: ​
12:24:54 AM: (Deploy site completed in 78ms)
12:24:54 AM: ​
12:24:54 AM:   Netlify Build Complete                                        
12:24:54 AM: ────────────────────────────────────────────────────────────────
12:24:54 AM: ​
12:24:54 AM: (Netlify Build completed in 1.2s)
12:24:54 AM: Caching artifacts
12:24:54 AM: Started saving node modules
12:24:54 AM: Finished saving node modules
12:24:55 AM: Site is live ✨
12:24:54 AM: Started saving build plugins
12:24:54 AM: Finished saving build plugins
12:24:54 AM: Started saving corepack cache
12:24:54 AM: Finished saving corepack cache
12:24:54 AM: Started saving pip cache
12:24:54 AM: Finished saving pip cache
12:24:54 AM: Started saving emacs cask dependencies
12:24:54 AM: Finished saving emacs cask dependencies
12:24:54 AM: Started saving maven dependencies
12:24:54 AM: Finished saving maven dependencies
12:24:54 AM: Started saving boot dependencies
12:24:54 AM: Finished saving boot dependencies
12:24:54 AM: Started saving rust rustup cache
12:24:54 AM: Finished saving rust rustup cache
12:24:54 AM: Started saving go dependencies
12:24:54 AM: Finished saving go dependencies
12:24:55 AM: Build script success
12:24:55 AM: Section completed: building
12:24:55 AM: Uploading Cache of size 75.9MB
12:24:56 AM: Section completed: cleanup
12:24:56 AM: Finished processing build request in 10.397s
2

I will be grateful for your help, especially since, once again, Akismet considers me a Bot.

3

@YoannaPo You don’t seem to be deploying your output (dist) folder, but the entire tailwindcss3 folder…

12:24:54 AM: Starting to deploy site from 'tailwindcss3'

Which is deploying your source files, and you can see that by accessing any of the repository paths:

/src/index.css
/src/style.css
/src/main.js
/public/vite.svg

You should adjust your Basic build settings to ensure that the correct dist folder is what is deployed by Netlify.

When running your build locally on my system your dist folder is being output into src (which is weird), so you may want to investigate why that is occuring (likely due to the root in your vite.config.cjs file).

1 Like
4

Thank you very much! @nathanmartin :clap: :clap: I read the link you sent and made the changes below. I did deploy, but there were no results (Tailwind was not working). I created a new site, hooked up the same repo as above on GitHub (the one with the changed directory in the vite.config.cjs) and did a deployment. Tailwind worked - first on this new site and then on the original one. I put screenshots in vite.config.cjs; may this be helpful to someone. Thank you so much @nathanmartin !!
vite_config_before1

vite_config_after1
vite_config_after1840×588 31.2 KB

5

Thanks for coming back and letting us know your problem was resolved.