https://github.com/bep/hugo-starter-tailwind-basic
A basic and simple to set up Hugo with TailwindCSS starter project.
https://github.com/bep/hugo-starter-tailwind-basic
hugo postcss tailwind tailwindcss
Last synced: about 2 months ago
JSON representation
A basic and simple to set up Hugo with TailwindCSS starter project.
- Host: GitHub
- URL: https://github.com/bep/hugo-starter-tailwind-basic
- Owner: bep
- License: mit
- Created: 2020-09-22T10:26:08.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-24T16:58:17.000Z (12 months ago)
- Last Synced: 2025-03-24T09:45:01.624Z (2 months ago)
- Topics: hugo, postcss, tailwind, tailwindcss
- Language: HTML
- Homepage: https://lucid-nightingale-60a4e2.netlify.app/
- Size: 297 KB
- Stars: 149
- Watchers: 6
- Forks: 30
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hugo Basic Starter for TailwindCSS v3.x
[](https://app.netlify.com/sites/lucid-nightingale-60a4e2/deploys)
A very simple starter set up with [TailwindCSS](https://tailwindcss.com/) and its [typography plugin](https://tailwindcss.com/docs/typography-plugin) and a build setup using [PostCSS](https://postcss.org/) and PurgeCSS (when running the production build).
In the preview deployment on Netlify it currently has a 100 score on both mobile and desktop on [Google PageSpeed](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Flucid-nightingale-60a4e2.netlify.app%2F&tab=mobile).
This setup can be used both as a starter project and a theme.
## As a Project
```bash
npm install
hugo server
```
## As a Theme
Import `github.com/bep/hugo-starter-tailwind-basic/v3` (use `github.com/bep/hugo-starter-tailwind-basic/v2` if you want/need Tailwind 2.x.) into your project, and then run:
```bash
hugo mod npm pack
npm install
```
You need to add (something like) this to your `hugo.toml`:
```toml
[module]
[module.hugoVersion]
extended = false
min = "0.112.0"
[[module.mounts]]
source = "assets"
target = "assets"
[[module.mounts]]
source = "hugo_stats.json"
target = "assets/watching/hugo_stats.json"
[build]
writeStats = true
[[build.cachebusters]]
source = "assets/watching/hugo_stats\\.json"
target = "styles\\.css"
[[build.cachebusters]]
source = "(postcss|tailwind)\\.config\\.js"
target = "css"
[[build.cachebusters]]
source = "assets/.*\\.(js|ts|jsx|tsx)"
target = "js"
[[build.cachebusters]]
source = "assets/.*\\.(.*)$"
target = "$1"
```
Then run your project as usual.