How to Create a Hugo Theme with TailwindCSS

1. Run the following:

   hugo new site $siteName
   cd $siteName
   hugo new theme $siteNameTheme
   git init
   cd themes/$siteNameTheme
   pnpm init
   pnpm install tailwindcss

   Copy
2. Connect tailwind.config.js to content & layouts:

   // tailwind.config.js
   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["content/**/*.md", "layouts/**/*.html"],
     theme: {
       extend: {},
     },
     plugins: [],
   };

   Copy
3. Navigate to /themes/sitethemeName/assets/css.
4. Add a src/input.css with the following:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   Copy
5. Update package.json with the following scripts:

    "build-tw": "pnpm tailwindcss -i ./assets/css/src/input.css -o ./assets/css/main.css",
    "watch-tw": "pnpm tailwindcss -i ./assets/css/src/input.css -o ./assets/css/main.css -w --minify"

   Copy
6. Run pnpm run watch-tw from siteThemeName directory to enable watching for design changes.

You are ready to start creating and editing your theme.