Cloudflare build not generating Tailwind CSS

[404missinglink]

I'm encountering an issue with my Hugo site when it's built on Cloudflare Pages. The Tailwind CSS is not being properly generated during the build process, resulting in the deployed site relying on the CSS that was previously built in my local development environment.

This is causing inconsistencies between my local development version and the live site deployed on Cloudflare Pages.

Steps to reproduce:

1. Set up a Hugo site with Tailwind CSS integration.
2. Configure the site to be built and deployed on Cloudflare Pages.
3. Make changes to the Tailwind CSS classes in the site's templates or content.
4. Trigger a build on Cloudflare Pages.
5. Observe that the changes made to the Tailwind CSS are not reflected in the deployed site.

Expected behavior: When the Hugo site is built on Cloudflare Pages, it should properly generate the Tailwind CSS based on the latest changes made to the site's templates and content. The deployed site should reflect the same styles as the local development version.

Actual behavior: The Tailwind CSS is not being generated during the Cloudflare Pages build process. The deployed site is using the CSS that was previously built in the local development environment, which may be outdated or inconsistent with the latest changes.

Suggested fix: To resolve this issue, we can try updating the build script in the package.json file to include the Tailwind CSS compilation step before running the Hugo build command. Here's the suggested modification:

"scripts": {
  ...
  "build": "npm run build:tw && cd env && hugo --minify",
  "build:tw": "tailwindcss -i ./env/assets/css/main.css -o ./env/assets/css/style.css",
  ...
},

This updated build script will first run the build:tw command to compile the Tailwind CSS and then run the Hugo build command. By including the Tailwind CSS compilation step in the build process, we ensure that the latest changes to the Tailwind CSS are reflected in the generated CSS file.

Please update the package.json file with the modified build script and trigger a new build on Cloudflare Pages to see if this resolves the issue.

Additional information:

• Hugo version: hugo v0.124.1-db083b05f16c945fec04f745f0ca8640560cf1ec+extended darwin/amd64 BuildDate=2024-03-20T11:40:10Z VendorInfo=brew
• Tailwind CSS version: 3.4.3
• Cloudflare Pages configuration: [Provide any relevant details about your Cloudflare Pages setup]
• package.json: https://github.com/takara-ai/Website/blob/031f32f371b71c7652931b138b83ee522ff9a2fe/package.json

I've checked the Hugo configuration and the Tailwind CSS integration, and everything works fine in my local development environment. The issue only occurs when building on Cloudflare Pages.

[404missinglink]

This bug is now fixed.

Issue:

tailwindcss was in dev dependencies preventing it from loading at build time in production.

"devDependencies": {
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3"
}

I moved the dependencies around and dropped the redundant fontawesome package.

"devDependencies": {
    "postcss-cli": "^11.0.0",
    "concurrently": "^8.2.2"
  },
  "dependencies": {
    "@tailwindcss/typography": "^0.5.13",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3",
    "concurrently": "^8.2.2",
    "cssnano": "^7.0.1",
    "cssnano-preset-advanced": "^7.0.1",
    "postcss-cli": "^11.0.0",
    "terser": "^5.30.4"
  },