minetaro12/app.css

## app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Thanks https://github.com/iandinwoodie/github-markdown-tailwindcss */
/* Additional vertical padding used by kbd tag. */
.py-05 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.markdown {
  @apply text-gray-900 leading-normal break-words;
}

.markdown > * + * {
  @apply mt-0 mb-4;
}

.markdown li + li {
  @apply mt-1;
}

.markdown li > p + p {
  @apply mt-6;
}

.markdown li ul {
  @apply p-0 m-0 ml-4;
}

.markdown li ul li {
  @apply list-[circle];
}

.markdown li ul li ul li {
  @apply list-[square];
}

.markdown strong {
  @apply font-semibold;
}

.markdown a {
  @apply text-blue-600 font-semibold;
}

.markdown strong a {
  @apply font-bold;
}

.markdown h1 {
  @apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
}

.markdown h2 {
  @apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
}

.markdown h3 {
  @apply leading-snug text-lg font-semibold mb-4 mt-6;
}

.markdown h4 {
  @apply leading-none text-base font-semibold mb-4 mt-6;
}

.markdown h5 {
  @apply leading-tight text-sm font-semibold mb-4 mt-6;
}

.markdown h6 {
  @apply leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6;
}

.markdown blockquote {
  @apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
}

.markdown code {
  @apply font-mono text-sm inline bg-gray-200 rounded px-1 py-05;
}

.markdown pre {
  @apply bg-gray-100 rounded p-4;
}

.markdown pre code {
  @apply block bg-transparent p-0 overflow-visible rounded-none;
}

.markdown ul {
  @apply text-base pl-8 list-disc;
}

.markdown ol {
  @apply text-base pl-8 list-decimal;
}

.markdown kbd {
  @apply text-xs inline-block rounded border px-1 py-05 align-middle font-normal font-mono shadow;
}

.markdown table {
  @apply text-base border-gray-600;
}

.markdown th {
  @apply border py-1 px-3;
}

.markdown td {
  @apply border py-1 px-3;
}

## baseof.html
<!DOCTYPE html>
<html>

<head>
  <title>Hugo with Tailwind CSS</title>
  {{ $css := resources.Get "css/out.css" }}
  <link rel="stylesheet" href="{{ $css.Permalink }}">
</head>

<body>
  <header>
    <h1>Hugo with Tailwind CSS</h1>
    <a href="/">Home</a>
  </header>
  <div>
    {{- block "main" . }}{{- end }}
  </div>
</body>

</html>

## list.html
{{ define "main" }}
<ul>
  {{ range (where .Site.RegularPages "Type" "posts") }}
  <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
  </li>
  {{ end }}
</ul>
{{ end }}

## package.json
{
	"scripts": {
		"build": "tailwindcss -i ./assets/css/app.css -o ./assets/css/out.css",
		"dev:tw": "tailwindcss -i ./assets/css/app.css -o ./assets/css/out.css --watch",
		"dev": "(sleep 5 && hugo server) & pnpm dev:tw"
	},
	"devDependencies": {
		"tailwindcss": "^3.3.3"
	}
}

## single.html
{{ define "main" }}
<div class="markdown">
  {{ .Content }}
</div>
{{ end }}

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

	/* Thanks https://github.com/iandinwoodie/github-markdown-tailwindcss */
	/* Additional vertical padding used by kbd tag. */
	.py-05 {
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
	}

	.markdown {
	@apply text-gray-900 leading-normal break-words;
	}

	.markdown > * + * {
	@apply mt-0 mb-4;
	}

	.markdown li + li {
	@apply mt-1;
	}

	.markdown li > p + p {
	@apply mt-6;
	}

	.markdown li ul {
	@apply p-0 m-0 ml-4;
	}

	.markdown li ul li {
	@apply list-[circle];
	}

	.markdown li ul li ul li {
	@apply list-[square];
	}

	.markdown strong {
	@apply font-semibold;
	}

	.markdown a {
	@apply text-blue-600 font-semibold;
	}

	.markdown strong a {
	@apply font-bold;
	}

	.markdown h1 {
	@apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
	}

	.markdown h2 {
	@apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
	}

	.markdown h3 {
	@apply leading-snug text-lg font-semibold mb-4 mt-6;
	}

	.markdown h4 {
	@apply leading-none text-base font-semibold mb-4 mt-6;
	}

	.markdown h5 {
	@apply leading-tight text-sm font-semibold mb-4 mt-6;
	}

	.markdown h6 {
	@apply leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6;
	}

	.markdown blockquote {
	@apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
	}

	.markdown code {
	@apply font-mono text-sm inline bg-gray-200 rounded px-1 py-05;
	}

	.markdown pre {
	@apply bg-gray-100 rounded p-4;
	}

	.markdown pre code {
	@apply block bg-transparent p-0 overflow-visible rounded-none;
	}

	.markdown ul {
	@apply text-base pl-8 list-disc;
	}

	.markdown ol {
	@apply text-base pl-8 list-decimal;
	}

	.markdown kbd {
	@apply text-xs inline-block rounded border px-1 py-05 align-middle font-normal font-mono shadow;
	}

	.markdown table {
	@apply text-base border-gray-600;
	}

	.markdown th {
	@apply border py-1 px-3;
	}

	.markdown td {
	@apply border py-1 px-3;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<title>Hugo with Tailwind CSS</title>
	{{ $css := resources.Get "css/out.css" }}
	<link rel="stylesheet" href="{{ $css.Permalink }}">
	</head>

	<body>
	<header>
	<h1>Hugo with Tailwind CSS</h1>
	<a href="/">Home</a>
	</header>
	<div>
	{{- block "main" . }}{{- end }}
	</div>
	</body>

	</html>
	{{ define "main" }}
	<ul>
	{{ range (where .Site.RegularPages "Type" "posts") }}
	<li>
	<a href="{{ .Permalink }}">{{ .Title }}</a>
	</li>
	{{ end }}
	</ul>
	{{ end }}
	{
	"scripts": {
	"build": "tailwindcss -i ./assets/css/app.css -o ./assets/css/out.css",
	"dev:tw": "tailwindcss -i ./assets/css/app.css -o ./assets/css/out.css --watch",
	"dev": "(sleep 5 && hugo server) & pnpm dev:tw"
	},
	"devDependencies": {
	"tailwindcss": "^3.3.3"
	}
	}
	{{ define "main" }}
	<div class="markdown">
	{{ .Content }}
	</div>
	{{ end }}
	/** @type {import('tailwindcss').Config} */
	module.exports = {
	content: ["./layouts/*/.html"],
	theme: {
	extend: {},
	},
	plugins: [],
	}