Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tailwind CSS not included in `<head>` in HTML in Production (GitHub Pages)

See original GitHub issue

Environment

Nuxi 3.0.0-rc.9 14:05:20 RootDir: C:/Websites/songuessr 14:05:23 Nuxt project info: 14:05:23

Operating System: Windows_NT
Node Version: v16.17.0
Nuxt Version: 3.0.0-rc.9
Nitro Version: 0.5.1
Package Manager: npm@8.18.0
Builder: vite
User Config: typescript, target, modules
Runtime Modules: @nuxtjs/tailwindcss@5.3.2
Build Modules: -

Reproduction

https://github.com/harvanchik/songuessr

Describe the bug

When running nuxt dev, the styles are working as expected. However, when deploying to GitHub Pages, the CSS is not even included in the <head> in the HTML. The page is completely unstyled.

I am using Nuxt Tailwind for the CSS. I am following Nuxt’s suggested GitHub Pages deployment method: GitHub Actions. I’ve done a lot of searching to see if anyone has resolved this issue, and have to yet find anything that works.

Additional context

This is a for a school project, so I need help ASAP. Thank you!

Logs

No response

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:11 (5 by maintainers)

Top GitHub Comments

2reactions

harvanchikcommented, Sep 8, 2022

The issue is finally resolved. The problem lied within the GitHub Workflow file(s). I was using workflows written for an outdated version of Nuxt. I have since updated them to work with Nuxt3. You can see what I put in there here.

This was tricky since there is no official documentation for how to deploy with GitHub Pages for Nuxt3 at the time this issue occurred. But at last, with the kind help of @danielroe, we were able to resolve it.

1reaction

danielroecommented, Sep 7, 2022

Yes, Nuxt 3 works fine with static sites.

Top Results From Across the Web

Tailwind CSS renders locally but not on GitHub pages

I've got TailwindCSS working locally but it's ...

Setting up docs with Tailwind CSS & GitHub Pages.

Learn how to setup documentation websites using Tailwind CSS, Jekyll, and GitHub Pages. See how to configure webpack to purge unused CSS.

[Help] Deploying my SvelteJS + TailwindCSS app to Github ...

I'm trying to deploy it onto GitHub Pages, but I can't seem to get it working correctly. The HTML loads fine and the...

Installation - Tailwind CSS

Start using Tailwind in your HTML. Add your compiled CSS file to the <head> and start using Tailwind's utility classes to style your...

Parcel

<html> <head> <title>My First Parcel App</title> <link rel="stylesheet" ... Parcel automatically updates your code in the browser – no page reload ...