My Astro site breaks when publishing online.

[zinc gazelle]

I have done web design/page building for years. But now want to dive more into development and coding. I found Astro and love it. And I want to combine with Tailwind. I haven‘t done this before. But have been able to start re-building one of my websites. Before I started, I also went through the full Astro starter course on the website. I have never used Github before, but figured shit out. I have never used Render.com before, but I figured out that too. Publishing the site was quick and it works well.

But now, when I want to push out my new site, the layout breaks and everything is a mess. What happened? Everything works well on local dev. But loading from the server, its not.

Here‘s the temp link to the online build at Render.com: https://johnmac.onrender.com/

I‘m also adding a screenshot of how the front page SHOULD look like.

[signal apex]

can you share a github repository of your site if you have one?

it seems to have problem with styling

[zinc gazelle]

I made it public now: https://github.com/mrjohnmac/JohnMacAstro.git

[signal apex]

@zinc gazelle still looks like that (dev server)

[zinc gazelle]

Hm, why is that. Its not looking like that here 🤔

[fringe arrow]

maybe you did not commit everything to git?
To test that, clone your repo again from git and install, build and run dev, to see if it's still reproducible like the first one. Or you have styles that depend on width and screen.

[cyan mist]

@zinc gazelle Your source code looks like committed by my newbie team member :))

1. Firstly, I quite sure that your online repository is missing some particular css code and maybe other things.
2. If you want to be a better developer, please don't ask anything like why does it work on my machine but is doesn't work on the server or other guys's machines. IMO, that is a question from newbie developers and the answer is the different runtime environment.
3. For your issue, the website UI is different between two environments. So the first thing you need to do is inspect the element (has issues) and check whether which css style(s) is different between two environment. Then, determine where it come from,...

[dry pawn]

Let’s try to keep with productive comments please. @zinc gazelle already mentioned he is new to development so, yeah, his code will likely reflect that. And deployment can trip up developers with much more experience. Questions about it are be allowed.

[zinc gazelle]

Could be possible. I did a full push, but maybe something is missing. Last simple project I tested with, I had no issues with this. I will check 👍🏻

[zinc gazelle]

1. That‘s right! Because like I mentioned in #general Its my first use of Github. And I‘m just pushing forward fast and figure things out as I go. My last simple Astro test project worked fine. Now I suspect its a Tailwind, or my ONE imported CSS override file I use.
2. If I want to be a better developer, I will fore sure ask questions like this 👍🏻
3. Will check it out. Thanks.

[zinc gazelle]

🙏🏻 🚀

[grand void]

can you do a git status on your local repository.

[zinc gazelle]

@grand void Let me try...

[grand void]

and if you can build your project and tell us the result, ti make sure where the problem is coming from.

First run npm run build
Then npm run preview

[grand void]

looks like everything is committed to the remote repository.

[fringe arrow]

that would not show local gitignored files, but that is less likely, issue is more likely to be screen width and size I would say.

[grand void]

yes, if he can build the project locally and test it, that would be better, so git and github will not effect anything.

[cyan mist]

If I was right, you are using macOS, could you please try this command: tree, if the list is too long, try tree > output.txt, then post the file output.txt here.

[zinc gazelle]

Running build and preview worked fine. Everything looks good.

[grand void]

then everything should be fine.

First make sure to backup your local project, remove the hidden .gitfolder by the command
rm -r -f .git

then try to initial a new repository.
make sure your .gitignore file doesn't ignore any important files.

[zinc gazelle]

"zsh: command not found: tree"

[zinc gazelle]

Okay 👍🏻 Will try that out. It looks more like something went wrong with the commit to Github.

[grand void]

maybe try to download the source from github and compare them.

[fringe arrow]

better not to touch the "only" working reference, and do all tests in new directory.

[grand void]

yeah

[zinc gazelle]

True. I‘ll make a duplicate. I see now on the published version that two images on the frontpage have a 404, but the first one is not. Though, they have the same file path. Filenames are not case sensitive, are they?

So it looks like the commit is not complete. I‘ll try the above.

[fringe arrow]

only windows does not make difference in cases, that can be source of issues, best is to always try match the case for similar reproduction on linux,...

[zinc gazelle]

Okay, thanks 🙂

[dry pawn]

I don't think this was pointed out but the styles/global.css file is 404ing in the network tab. It might be that you should put that file in your public folder and access it from there

https://docs.astro.build/en/core-concepts/project-structure/#public

More info:
https://docs.astro.build/en/guides/styling/#external-styles

https://docs.astro.build/en/guides/imports/#files-in-public

[zinc gazelle]

@dry pawn Hey. Yes, I just noticed. But I also followed the suggestion @grand void and I see some progress now. But yes, I will try to move that file and see if loads. I just find it strange that this simple file have such big impact.

Guys, I need a break. Thank you so much for the support here, all of you 🙏🏻 My face is drying up, and I need food and water 😄 Back on later.

[zinc gazelle]

Greetings. So, I have fixed the issue with the 404 for the Global.css file. But the layout of this is still messed up. I expecting this to be related to my Tailwind setup now. So I‘ll explain what I have done from the start.

• I followed the suggested setup on the Astro.build website.
• I have one Global.css for some simple overrides, loaded with "import "../styles/global.css"; in my MainHead.astro file.
• I wanted to have a more fluid font scaling and side padding, so I got some custom stuff for that. I put this in Tailwind‘s base.css. But I wonder if this is not the right place for that. I‘ll add that file here.

Tailwind docs and configs are crazy. And there‘s so much to consider 🤔

[dry pawn]

Looks like there are various CSS Variables that aren't set. You can see this when Inspecting the website. On the first section of the page you have a class with the name pb-48, it uses a CSS Variable called --spacing-48 which is not defined. There's other CSS Variables with the same issue as well.

Where do these CSS Variables come from? The Tailwind ones are prefixed with --tw so maybe they are custom ones that you created?

[zinc gazelle]

@dry pawn yes, I took them from another system intended to be used with Tailwind.

I will spend some time on that and see how these variables should be added and configured in the right way.

[zinc gazelle]

Greetings guys. And thanks for your help on all this. I have also been over at the Tailwind Discord group and asked for some clarity. So I wanted to share the insights and method to fix the Astro+Tailwind issue. Could be good for some of you to know.

First, here‘s some feedback from one of the team members:

"Astro handles Tailwind weirdly and somewhat stupidly imo. It creates a separate base.css for each component. Which means you can't use custom CSS or @apply easily"

So here‘s what‘s been done now that make things work all good:

1. Importing my /styles/global.css in my MainHead.astro file.
2. Adding Tailwind directives in this file. (@tailwind base; @tailwind components; @tailwind utilities;)
3. Add your own poetry and custom css into this file.

That loads everything as it should. Also my custom clamp variables for fluid font-sizing and side-padding.

Adding my CSS file here.

[heady marsh]

this doesnt seem right at all

did you make an issue on the astro tailwind integration repo? it should be able to handle @apply fine

not that @apply is a good idea though