pugud19 / components

Tailwind + Astro

Astro with Tailwind on Github Pages

1. In Github go to Settings > Developer settings > Personal Access tokens. Generate a new token with Repo permissions.

2. In the astro project repo, go to Settings > Secrets and add your new personal access token with the name API_TOKEN_GITHUB.

3. Set Github Pages to branch gh-pages

4. Change buildOptions.site to your Github Pages URL

   in astro.config.mjs

   export default {
   buildOptions: {
     site: 'https://mulaidev.github.io/components',

5. Reference buildOptions.site with Astro.site

   in /src/pages/index.astro (line 8)

   ---
   const Css = Astro.site + "/global.css";
   ---

   in /src/pages/index.astro (line 19)

   <link rel="stylesheet" type="text/css" href={Css} />

6. Add scripts in package.json to generate TailwindCSS and reference it after build time

   in package.json

   "scripts": {
     "start": "astro dev",
     "build": "astro build",
     "css": "npx tailwindcss -o dist/global.css"
   },

   in .github/workflows/deploy.yml

   - name: Build
         run: |
           npm run build
           touch ./dist/.nojekyll
           npm run css