Hugo and Tailwind CSS Project Setup

• Hugo and Tailwind CSS Project Setup
  • Prerequisites
  • Initialize Hugo
  • Configure Hugo
    • Create or Install a Theme
    • Update Configuration
    • Content Creation
  • Integrate Tailwind CSS
    • Install Dependencies
    • Configure Tailwind and PostCSS
    • Add Tailwind to Your CSS
    • Build CSS with PostCSS
    • Automate During Development
    • Link CSS in Hugo Layouts
  • Serve and Build the Site
  • Conclusion

Here's a comprehensive README.md document that compiles all the instructions on how to set up a Hugo project, including how to add a custom theme and integrate Tailwind CSS:

This guide provides detailed instructions on how to set up a Hugo static site with Tailwind CSS integrated, directly within an existing project directory.

Prerequisites

Before you start, you need to have Hugo and Node.js (with npm) installed on your system.

• Hugo: Installation Guide
• Node.js and npm: Download Page

Initialize Hugo

Navigate to your project directory and initialize a new Hugo site. This command will also force Hugo to create a new site even if files are already present in the directory.

hugo new site . --force

Congratulations! Your new Hugo site is now created in your current project directory.

Configure Hugo

Create or Install a Theme

• Create a custom theme:

  hugo new theme <THEMENAME>

  Replace <THEMENAME> with your desired theme name.

• Install a theme from Hugo themes gallery: Hugo Themes

Update Configuration

Set the theme in the config.toml file:

theme = "<THEMENAME>"

Content Creation

Create new content by specifying the section and filename:

hugo new content/<SECTIONNAME>/<FILENAME>.<FORMAT>

Integrate Tailwind CSS

Install Dependencies

Install Tailwind CSS and its peer dependencies:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Configure Tailwind and PostCSS

Generate the Tailwind and PostCSS configuration files:

npx tailwindcss init -p

Configure PurgeCSS in tailwind.config.js to remove unused styles:

module.exports = {
  purge: ['./layouts/**/*.html', './content/**/*.md'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind to Your CSS

Create a CSS file at assets/css/styles.css and include Tailwind's directives:

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

Build CSS with PostCSS

Update package.json to add scripts for building CSS:

"scripts": {
  "build:css": "postcss assets/css/styles.css -o static/css/styles.css",
  "watch:css": "postcss assets/css/styles.css -o static/css/styles.css --watch"
}

Build the CSS:

npm run build:css

Automate During Development

Automatically rebuild CSS on changes:

npm run watch:css

Link CSS in Hugo Layouts

Include the compiled CSS in your layouts:

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/styles.css">

Serve and Build the Site

Serve your site locally with Hugo's built-in server, which supports live reloading:

hugo server --buildDrafts

Build your site to generate the static files:

hugo

Conclusion

You now have a Hugo site integrated with Tailwind CSS ready for development. For more information on customization and advanced configurations, refer to the Hugo documentation and the Tailwind CSS documentation.

This README.md document serves as a complete guide to setting up a Hugo project with Tailwind CSS, tailored for rapid development and easy deployment. It covers every step from initial setup to development and build processes.