CODEWITHSUNDEEP
github-actionstailwind-cssgithub-pagesastrojs
ferran
ferran

Reputation: 128

Problem with Tailwind and Github Pages deployment

I'm deploying this Astro landing page and I have followed Astro's guides to both integrate Tailwind and deploy it to Github Pages and the page loads with correct HTML but Tailwind classes do not seem to work/load. I cannot find what is missing in the project (maybe some deploy.yml config?) for it to work. I've built the project locally and the problem is the same

Upvotes: 1

Views: 844

Answers (2)

Astro Naut
Astro Naut

Reputation: 11

I had this issue myself today, and after a long day of research, I found the solution in the astro.config.mjs file.

Changed the following to the build configuration:

// @ts-check
import { defineConfig } from 'astro/config';

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  build: {
    assetsPrefix: './',
  },
  vite: {
    plugins: [tailwindcss()],
  },
  site: "com.yourdomain.io",
  trailingSlash: "never",
  base: "github-repo",
});

This setup works when using TailwindCSS, Astro, and deploying via GitHub Actions with a custom domain.

This fixed the issue for me! Hope it helps someone else.

Upvotes: 1

ferran
ferran

Reputation: 128

CSS import in head was not getting it right and I don't know what I did but now it loads it well. Indeed, the media wasn't loading either and I had to add the base to the img and video elements' sources. Thanks to @Wongjn for the insight though.

In my project, you can see the steps to achieve this.

Upvotes: 1

Related Questions