Search code examples
tailwind-cssnetlify

Tailwind Netlify - local site looks different from deploy

I have a very basic setup, nothing special, just HTML (no Vue etc). I have Tailwind installed and everything is running. When I deploy to Netlify, Tailwind styles are applied, but still the site looks very different. I don't purge and I use the "netlify deploy" command.

So here are my steps:

  1. I change something, watcher is running and outputting everything in /dist
  2. I use scss
  3. I run "netlify deploy" in my terminal

Here are the screenshots:

Local:

enter image description here

On Netlify:

enter image description here

As you can see, there is a lot more spacing between the icons and I wonder why that is. When I inspect the code, it's exactly the same. I have been at this for a couple of hours now and I can't procede before I know where this problem is coming from.

Things I have tried:

  1. Added purging to the tailwind config, didn't help
  2. Running "netlify deploy --prod", also didn't help
  3. Clearing cache

Sources:

Repo: https://github.com/RobineSavert/map-portfolio

Netlify: https://6190119577337c9293c65f02--ecstatic-thompson-9cf61b.netlify.app/

My deployment settings on Netlify

enter image description here

Can anyone tell me what I am doing wrong? Thanks so much!

Solution

  • If you want the result to look alike first image, then coming to the wrapper for your icons on line 30:

    <!-- from this -->
<div class="flex flex-wrap just m-16 py-3 justify-between">

<!-- to this -->
<div class="... justify-start">

    would solve it, although i'm not sure about just??