├── LICENSE
├── README.md
├── postcss-cli-defer
    ├── .gitignore
    ├── README.md
    ├── assets
    │   └── css
    │   │   ├── components
    │   │       └── markdown.css
    │   │   └── styles.css
    ├── content
    │   └── _index.md
    ├── hugo.toml
    ├── hugo_stats.json
    ├── layouts
    │   ├── _default
    │   │   └── baseof.html
    │   └── index.html
    ├── package.json
    ├── postcss.config.js
    └── tailwind.config.js
├── tailwindcss-cli-defer
    ├── .gitignore
    ├── README.md
    ├── assets
    │   └── css
    │   │   ├── components
    │   │       └── markdown.css
    │   │   └── styles.css
    ├── content
    │   └── _index.md
    ├── hugo.toml
    ├── hugo_stats.json
    ├── layouts
    │   ├── _default
    │   │   └── baseof.html
    │   └── index.html
    ├── package.json
    └── tailwind.config.js
└── tailwindcss-cli-simple
    ├── .gitignore
    ├── README.md
    ├── assets
        └── css
        │   ├── components
        │       └── markdown.css
        │   └── styles.css
    ├── content
        └── _index.md
    ├── hugo.toml
    ├── layouts
        ├── _default
        │   └── baseof.html
        └── index.html
    ├── package.json
    └── tailwind.config.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Bjørn Erik Pedersen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | Hugo `v0.128.0` added improved support for the upcoming [TailwindCSS v4](https://tailwindcss.com/blog/tailwindcss-v4-alpha).
 4 | 
 5 | 
 6 | This version is still in alpha, and there are still some missing pieces. This repo contains a few variants of how to set up TailwindCSS with Hugo as a test/documentation about what's working and what's not.
 7 | 
 8 | Notes below updated 2024-06-25:
 9 | 
10 | 
11 | ## General
12 | 
13 | TailwindCSS v4 alpha does not yet support custom a Tailwind configuration file. This means that there's currently no way to configure the input to TailwindCSS's build, e.g:
14 | 
15 | ```js
16 | module.exports = {
17 | 	content: ['./hugo_stats.json'],
18 | };
19 | ```
20 | 
21 | TailwindCSS scans text files for HTML identifiers starting from the project directory, and is very fast and smart about it. But this is a limitation we expect to be fixed before the final release.
22 | 
23 | ## Variants
24 | 
25 | ### TailwindCSS CLI Simple
26 | 
27 | Triggers CSS rebuild on changes to CSS or to layout files.
28 | 
29 | Benefits:
30 | 
31 | * Simple to set up.
32 | * Works well in simple setups.
33 | 
34 | Drawbacks:
35 | 
36 | * Triggers CSS rebuild on changes to layout files that's not related to style.
37 | * Does not work in more complex setups (e.g. HTML identifiers from Hugo Modules).
38 | 
39 | ### TailwindCSS CLI Defer
40 | 
41 | Only triggers CSS rebuilds when either CSS or the `hugo_stats.json` file changes.
42 | 
43 | Benefits:
44 | 
45 | * Faster rebuilds when changing layout files that's not related to style.
46 | * Works in more complex setups (e.g. HTML identifiers from Hugo Modules).
47 | 
48 | Drawbacks:
49 | 
50 | * Slightly more complex setup.
51 | 
52 | ### PostCSS CLI Defer
53 | 
54 | This is same as `TailwindCSS CLI Defer`, but using PostCSS CLI instead of TailwindCSS CLI.
55 | 
56 | Benefits:
57 | 
58 | * Can use PostCSS plugins. But note that TailwindCSS v4 comes with autoprefixer and nesting built-in.
59 | 
60 | Drawbacks:
61 | 
62 | * Slower builds (about 170ms vs 100ms for the others for this small setup).
63 | 
64 | 
65 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/.gitignore:
--------------------------------------------------------------------------------
1 | public/
2 | node_modules/
3 | package-lock.json
4 | .hugo_build.lock
5 | resources/


--------------------------------------------------------------------------------
/postcss-cli-defer/README.md:
--------------------------------------------------------------------------------
1 | 
2 | ## Install
3 | 
4 | ```
5 | npm i
6 | hugo server
7 | ```
8 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/assets/css/components/markdown.css:
--------------------------------------------------------------------------------
  1 | .markdown {
  2 |   @apply text-gray-900 font-serif;
  3 | 
  4 |   h1,
  5 |   h2,
  6 |   h3,
  7 |   h4,
  8 |   h5 {
  9 |     @apply font-sans tracking-tight;
 10 |   }
 11 | 
 12 |   h1 {
 13 |     @apply text-3xl font-bold;
 14 |   }
 15 | 
 16 |   h2 {
 17 |     @apply text-2xl font-bold;
 18 |   }
 19 | 
 20 |   h3 {
 21 |     @apply text-xl font-bold;
 22 |   }
 23 | 
 24 |   h4 {
 25 |     @apply text-lg font-bold;
 26 |   }
 27 | 
 28 |   h5 {
 29 |     @apply text-base font-bold;
 30 |   }
 31 | 
 32 |   h6 {
 33 |     @apply text-sm font-bold;
 34 |   }
 35 | 
 36 |   p + h2,
 37 |   p + h3,
 38 |   ul + h2,
 39 |   ul + h3,
 40 |   ol + h2,
 41 |   ol + h3 {
 42 |     @apply mt-6;
 43 |   }
 44 | 
 45 |   h2 + h3 {
 46 |     @apply mt-2;
 47 |   }
 48 | 
 49 |   p {
 50 |     @apply text-base mt-2 leading-relaxed;
 51 |   }
 52 | 
 53 |   a {
 54 |     @apply text-blue-600 underline;
 55 |   }
 56 | 
 57 |   a:hover {
 58 |     @apply text-blue-800;
 59 |   }
 60 | 
 61 |   ul {
 62 |     @apply list-disc pl-4 mt-2;
 63 |   }
 64 | 
 65 |   ol {
 66 |     @apply list-decimal pl-4 mt-2;
 67 |   }
 68 | 
 69 |   li:not(:last-child) {
 70 |     @apply mb-2;
 71 |   }
 72 | 
 73 |   blockquote {
 74 |     @apply border-l-2 border-gray-200 pl-3 mt-6 mb-8;
 75 |   }
 76 | 
 77 |   .highlight {
 78 |     @apply my-2;
 79 |     pre {
 80 |       @apply text-sm m-0 p-4;
 81 | 
 82 |       code {
 83 |         @apply bg-none p-0;
 84 |       }
 85 |     }
 86 |   }
 87 | 
 88 |   pre:has(code) {
 89 |     @apply p-2 m-4 bg-gray-100 rounded-lg overflow-x-auto;
 90 |   }
 91 | 
 92 |   pre {
 93 |     code {
 94 |       @apply bg-inherit text-sm font-mono;
 95 |     }
 96 |   }
 97 | 
 98 |   code {
 99 |     @apply bg-gray-200 px-1 rounded-md text-green-800;
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/assets/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | @theme {
 4 |   --color-orange-300: #f56642;
 5 |   --color-blue-100: #427bf5;
 6 |   --color-gray-50: #f8fafc;
 7 |   --color-gray-100: #f1f5f9;
 8 |   --color-gray-200: #e2e8f0;
 9 |   --color-green-800: #3f6212;
10 |   --color-green-900: #365314;
11 |   --color-green-950: #1a2e05;
12 | }
13 | 
14 | body {
15 |   @apply antialiased;
16 | }
17 | 
18 | @import "components/markdown.css";
19 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/content/_index.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: TailwindCSS 4 via PostCSS
  3 | ---
  4 | 
  5 | ## Some Markdown Sample Text
  6 | 
  7 | ### Philosophy
  8 | 
  9 | Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
 10 | 
 11 | Readability, however, is emphasized above all else. A Markdown-formatted
 12 | document should be publishable as-is, as plain text, without looking
 13 | like it's been marked up with tags or formatting instructions. While
 14 | Markdown's syntax has been influenced by several existing text-to-HTML
 15 | filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html),
 16 | [Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of
 17 | inspiration for Markdown's syntax is the format of plain text email.
 18 | 
 19 | A code block formatted with [Chroma](https://github.com/alecthomas/chroma) syntax highlighting:
 20 | 
 21 | ```go
 22 | // Cache is a simple thread safe cache backed by a map.
 23 | type Cache[K comparable, T any] struct {
 24 | 	m map[K]T
 25 | 	sync.RWMutex
 26 | }
 27 | 
 28 | ```
 29 | 
 30 | ## Block Elements
 31 | 
 32 | ### Paragraphs and Line Breaks
 33 | 
 34 | A paragraph is simply one or more consecutive lines of text, separated
 35 | by one or more blank lines. (A blank line is any line that looks like a
 36 | blank line -- a line containing nothing but spaces or tabs is considered
 37 | blank.) Normal paragraphs should not be indented with spaces or tabs.
 38 | 
 39 | The implication of the "one or more consecutive lines of text" rule is
 40 | that Markdown supports "hard-wrapped" text paragraphs. This differs
 41 | significantly from most other text-to-HTML formatters (including Movable
 42 | Type's "Convert Line Breaks" option) which translate every line break
 43 | character in a paragraph into a `<br />` tag.
 44 | 
 45 | When you *do* want to insert a `<br />` break tag using Markdown, you
 46 | end a line with two or more spaces, then type return.
 47 | 
 48 | ### Headers
 49 | 
 50 | Markdown supports two styles of headers, [Setext] [1] and [atx] [2].
 51 | 
 52 | Optionally, you may "close" atx-style headers. This is purely
 53 | cosmetic -- you can use this if you think it looks better. The
 54 | closing hashes don't even need to match the number of hashes
 55 | used to open the header. (The number of opening hashes
 56 | determines the header level.)
 57 | 
 58 | 
 59 | ### Blockquotes
 60 | 
 61 | Markdown uses email-style `>` characters for blockquoting. If you're
 62 | familiar with quoting passages of text in an email message, then you
 63 | know how to create a blockquote in Markdown. It looks best if you hard
 64 | wrap the text and put a `>` before every line:
 65 | 
 66 | > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
 67 | > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
 68 | > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
 69 | > 
 70 | > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
 71 | > id sem consectetuer libero luctus adipiscing.
 72 | 
 73 | Markdown allows you to be lazy and only put the `>` before the first
 74 | line of a hard-wrapped paragraph:
 75 | 
 76 | > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
 77 | consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
 78 | Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
 79 | 
 80 | > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
 81 | id sem consectetuer libero luctus adipiscing.
 82 | 
 83 | Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
 84 | adding additional levels of `>`:
 85 | 
 86 | > This is the first level of quoting.
 87 | >
 88 | > > This is nested blockquote.
 89 | >
 90 | > Back to the first level.
 91 | 
 92 | Blockquotes can contain other Markdown elements, including headers, lists,
 93 | and code blocks:
 94 | 
 95 | > ## This is a header.
 96 | > 
 97 | > 1.   This is the first list item.
 98 | > 2.   This is the second list item.
 99 | > 
100 | > Here's some example code:
101 | > 
102 | >     return shell_exec("echo $input | $markdown_script");
103 | 
104 | Any decent text editor should make email-style quoting easy. For
105 | example, with BBEdit, you can make a selection and choose Increase
106 | Quote Level from the Text menu.
107 | 
108 | 
109 | ### Lists
110 | 
111 | Markdown supports ordered (numbered) and unordered (bulleted) lists.
112 | 
113 | Unordered lists use asterisks, pluses, and hyphens -- interchangably
114 | -- as list markers:
115 | 
116 | *   Red
117 | *   Green
118 | *   Blue
119 | 
120 | is equivalent to:
121 | 
122 | +   Red
123 | +   Green
124 | +   Blue
125 | 
126 | and:
127 | 
128 | -   Red
129 | -   Green
130 | -   Blue
131 | 
132 | Ordered lists use numbers followed by periods:
133 | 
134 | 1.  Bird
135 | 2.  McHale
136 | 3.  Parish
137 | 
138 | It's important to note that the actual numbers you use to mark the
139 | list have no effect on the HTML output Markdown produces. The HTML
140 | Markdown produces from the above list is:
141 | 
142 | If you instead wrote the list in Markdown like this:
143 | 
144 | 1.  Bird
145 | 1.  McHale
146 | 1.  Parish
147 | 
148 | or even:
149 | 
150 | 3. Bird
151 | 1. McHale
152 | 8. Parish
153 | 
154 | you'd get the exact same HTML output. The point is, if you want to,
155 | you can use ordinal numbers in your ordered Markdown lists, so that
156 | the numbers in your source match the numbers in your published HTML.
157 | But if you want to be lazy, you don't have to.
158 | 
159 | To make lists look nice, you can wrap items with hanging indents:
160 | 
161 | *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
162 |     Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
163 |     viverra nec, fringilla in, laoreet vitae, risus.
164 | *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
165 |     Suspendisse id sem consectetuer libero luctus adipiscing.
166 | 
167 | But if you want to be lazy, you don't have to:
168 | 
169 | *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
170 | Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
171 | viverra nec, fringilla in, laoreet vitae, risus.
172 | *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
173 | Suspendisse id sem consectetuer libero luctus adipiscing.
174 | 
175 | List items may consist of multiple paragraphs. Each subsequent
176 | paragraph in a list item must be indented by either 4 spaces
177 | or one tab:
178 | 
179 | 1.  This is a list item with two paragraphs. Lorem ipsum dolor
180 |     sit amet, consectetuer adipiscing elit. Aliquam hendrerit
181 |     mi posuere lectus.
182 | 
183 |     Vestibulum enim wisi, viverra nec, fringilla in, laoreet
184 |     vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
185 |     sit amet velit.
186 | 
187 | 2.  Suspendisse id sem consectetuer libero luctus adipiscing.
188 | 
189 | It looks nice if you indent every line of the subsequent
190 | paragraphs, but here again, Markdown will allow you to be
191 | lazy:
192 | 
193 | *   This is a list item with two paragraphs.
194 | 
195 |     This is the second paragraph in the list item. You're
196 | only required to indent the first line. Lorem ipsum dolor
197 | sit amet, consectetuer adipiscing elit.
198 | 
199 | *   Another item in the same list.
200 | 
201 | To put a blockquote within a list item, the blockquote's `>`
202 | delimiters need to be indented:
203 | 
204 | *   A list item with a blockquote:
205 | 
206 |     > This is a blockquote
207 |     > inside a list item.
208 | 
209 | To put a code block within a list item, the code block needs
210 | to be indented *twice* -- 8 spaces or two tabs:
211 | 
212 | *   A list item with a code block:
213 | 
214 |         <code goes here>
215 | 
216 | ### Code Blocks
217 | 
218 | Pre-formatted code blocks are used for writing about programming or
219 | markup source code. Rather than forming normal paragraphs, the lines
220 | of a code block are interpreted literally. Markdown wraps a code block
221 | in both `<pre>` and `<code>` tags.
222 | 
223 | To produce a code block in Markdown, simply indent every line of the
224 | block by at least 4 spaces or 1 tab.
225 | 
226 | This is a normal paragraph:
227 | 
228 |     This is a code block.
229 | 
230 | Here is an example of AppleScript:
231 | 
232 |     tell application "Foo"
233 |         beep
234 |     end tell
235 | 
236 | A code block continues until it reaches a line that is not indented
237 | (or the end of the article).
238 | 
239 | Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
240 | are automatically converted into HTML entities. This makes it very
241 | easy to include example HTML source code using Markdown -- just paste
242 | it and indent it, and Markdown will handle the hassle of encoding the
243 | ampersands and angle brackets. For example, this:
244 | 
245 |     <div class="footer">
246 |         &copy; 2004 Foo Corporation
247 |     </div>
248 | 
249 | Regular Markdown syntax is not processed within code blocks. E.g.,
250 | asterisks are just literal asterisks within a code block. This means
251 | it's also easy to use Markdown to write about Markdown's own syntax.
252 | 
253 | ```
254 | tell application "Foo"
255 |     beep
256 | end tell
257 | ```
258 | 
259 | ## Span Elements
260 | 
261 | ### Links
262 | 
263 | Markdown supports two style of links: *inline* and *reference*.
264 | 
265 | In both styles, the link text is delimited by [square brackets].
266 | 
267 | To create an inline link, use a set of regular parentheses immediately
268 | after the link text's closing square bracket. Inside the parentheses,
269 | put the URL where you want the link to point, along with an *optional*
270 | title for the link, surrounded in quotes. For example:
271 | 
272 | This is [an example](http://example.com/) inline link.
273 | 
274 | [This link](http://example.net/) has no title attribute.
275 | 
276 | ### Emphasis
277 | 
278 | Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
279 | emphasis. Text wrapped with one `*` or `_` will be wrapped with an
280 | HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML
281 | `<strong>` tag. E.g., this input:
282 | 
283 | *single asterisks*
284 | 
285 | _single underscores_
286 | 
287 | **double asterisks**
288 | 
289 | __double underscores__
290 | 
291 | ### Code
292 | 
293 | To indicate a span of code, wrap it with backtick quotes (`` ` ``).
294 | Unlike a pre-formatted code block, a code span indicates code within a
295 | normal paragraph. For example:
296 | 
297 | Use the `printf()` function.


--------------------------------------------------------------------------------
/postcss-cli-defer/hugo.toml:
--------------------------------------------------------------------------------
 1 | baseURL      = 'https://example.org/'
 2 | title        = 'Tailwind CSS CLI Simple'
 3 | disableKinds = ['taxonomy', 'term', "page", "section", "sitemap"]
 4 | 
 5 | [outputs]
 6 |     home = ["html"]
 7 | 
 8 | [module]
 9 |     [module.hugoVersion]
10 |         min = "0.128.0"
11 |     [[module.mounts]]
12 |         source = "assets"
13 |         target = "assets"
14 |     [[module.mounts]]
15 |         source = "content"
16 |         target = "content"
17 |     [[module.mounts]]
18 |         source       = "hugo_stats.json"
19 |         target       = "assets/notwatching/hugo_stats.json"
20 |         disableWatch = true
21 | [build.buildStats]
22 |     enable = true
23 | [[build.cachebusters]]
24 |     source = "assets/notwatching/hugo_stats\\.json"
25 |     target = "css"
26 | [[build.cachebusters]]
27 |     source = "(postcss|tailwind)\\.config\\.js"
28 |     target = "css"
29 | 
30 | [markup]
31 |     [markup.highlight]
32 |         style = 'github'
33 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/hugo_stats.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "htmlElements": {
 3 |     "tags": [
 4 |       "a",
 5 |       "article",
 6 |       "blockquote",
 7 |       "body",
 8 |       "code",
 9 |       "div",
10 |       "em",
11 |       "h1",
12 |       "h2",
13 |       "h3",
14 |       "head",
15 |       "html",
16 |       "li",
17 |       "meta",
18 |       "ol",
19 |       "p",
20 |       "pre",
21 |       "script",
22 |       "strong",
23 |       "title",
24 |       "ul"
25 |     ],
26 |     "classes": [
27 |       "bg-orange-200",
28 |       "bg-orange-400",
29 |       "font-bold",
30 |       "highlight",
31 |       "markdown",
32 |       "max-w-[90ch]",
33 |       "mb-4",
34 |       "md:p-6",
35 |       "mx-auto",
36 |       "my-10",
37 |       "p-2",
38 |       "rounded-lg",
39 |       "text-3xl",
40 |       "text-black",
41 |       "tracking-tight",
42 |       "uppercase"
43 |     ],
44 |     "ids": [
45 |       "block-elements",
46 |       "blockquotes",
47 |       "code",
48 |       "code-blocks",
49 |       "emphasis",
50 |       "headers",
51 |       "links",
52 |       "lists",
53 |       "paragraphs-and-line-breaks",
54 |       "philosophy",
55 |       "some-markdown-sample-text",
56 |       "span-elements",
57 |       "this-is-a-header"
58 |     ]
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/layouts/_default/baseof.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>
 6 |       {{ .Title }}
 7 |     </title>
 8 |     <meta name="description" content="{{ .Description }}" />
 9 |     {{ with (templates.Defer (dict "key" "global")) }}
10 |       {{ $t := debug.Timer "postcss" }}
11 |       {{ with resources.Get "css/styles.css" }}
12 |         {{ $opts := dict
13 |           "inlineImports" true
14 |         }}
15 |         {{ with . | css.PostCSS $opts }}
16 |           {{ if hugo.IsDevelopment }}
17 |             <link rel="stylesheet" href="{{ .RelPermalink }}" />
18 |           {{ else }}
19 |             {{ with . | minify | fingerprint }}
20 |               <link
21 |                 rel="stylesheet"
22 |                 href="{{ .RelPermalink }}"
23 |                 integrity="{{ .Data.Integrity }}"
24 |                 crossorigin="anonymous" />
25 |             {{ end }}
26 |           {{ end }}
27 |         {{ end }}
28 |       {{ end }}
29 |       {{ $t.Stop }}
30 |     {{ end }}
31 |   </head>
32 |   <body class="my-10">
33 |     {{ block "main" . }}{{ end }}
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/layouts/index.html:
--------------------------------------------------------------------------------
 1 | {{ define "main" }}
 2 |   <article class="mx-auto max-w-[90ch] bg-orange-400 p-2 md:p-6 rounded-lg">
 3 |     <h1 class="text-3xl mb-4 tracking-tight text-black font-bold uppercase">
 4 |       {{ .Title }}
 5 |     </h1>
 6 | 
 7 |     <div class="markdown">
 8 |       {{ .Content }}
 9 |     </div>
10 |   </article>
11 | {{ end }}
12 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "postcss-cli",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "test": "echo \"Error: no test specified\" && exit 1"
 6 |   },
 7 |   "author": "",
 8 |   "license": "ISC",
 9 |   "dependencies": {
10 |     "@tailwindcss/postcss": "^4.0.0",
11 |     "postcss-cli": "^10.1.0",
12 |     "tailwindcss": "^4.0.0"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/postcss.config.js:
--------------------------------------------------------------------------------
1 | // TODO(bep) let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
2 | 
3 | module.exports = {
4 | 	plugins: {
5 | 		'@tailwindcss/postcss': {},
6 | 	},
7 | };
8 | 


--------------------------------------------------------------------------------
/postcss-cli-defer/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | This file is present to satisy a requiremenet of the Tailwind CSS IntelliSense
3 | extension for Visual Studio Code.
4 | 
5 | https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
6 | 
7 | The rest of this file is intentionally empty.
8 | */
9 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/.gitignore:
--------------------------------------------------------------------------------
1 | public/
2 | node_modules/
3 | package-lock.json
4 | .hugo_build.lock
5 | resources/


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/README.md:
--------------------------------------------------------------------------------
1 | 
2 | ## Install
3 | 
4 | ```
5 | npm i
6 | hugo server
7 | ```
8 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/assets/css/components/markdown.css:
--------------------------------------------------------------------------------
  1 | .markdown {
  2 |   @apply text-gray-900 font-serif;
  3 | 
  4 |   h1,
  5 |   h2,
  6 |   h3,
  7 |   h4,
  8 |   h5 {
  9 |     @apply font-sans tracking-tight;
 10 |   }
 11 | 
 12 |   h1 {
 13 |     @apply text-3xl font-bold;
 14 |   }
 15 | 
 16 |   h2 {
 17 |     @apply text-2xl font-bold;
 18 |   }
 19 | 
 20 |   h3 {
 21 |     @apply text-xl font-bold;
 22 |   }
 23 | 
 24 |   h4 {
 25 |     @apply text-lg font-bold;
 26 |   }
 27 | 
 28 |   h5 {
 29 |     @apply text-base font-bold;
 30 |   }
 31 | 
 32 |   h6 {
 33 |     @apply text-sm font-bold;
 34 |   }
 35 | 
 36 |   p + h2,
 37 |   p + h3,
 38 |   ul + h2,
 39 |   ul + h3,
 40 |   ol + h2,
 41 |   ol + h3 {
 42 |     @apply mt-6;
 43 |   }
 44 | 
 45 |   h2 + h3 {
 46 |     @apply mt-2;
 47 |   }
 48 | 
 49 |   p {
 50 |     @apply text-base mt-2 leading-relaxed;
 51 |   }
 52 | 
 53 |   a {
 54 |     @apply text-blue-600 underline;
 55 |   }
 56 | 
 57 |   a:hover {
 58 |     @apply text-blue-800;
 59 |   }
 60 | 
 61 |   ul {
 62 |     @apply list-disc pl-4 mt-2;
 63 |   }
 64 | 
 65 |   ol {
 66 |     @apply list-decimal pl-4 mt-2;
 67 |   }
 68 | 
 69 |   li:not(:last-child) {
 70 |     @apply mb-2;
 71 |   }
 72 | 
 73 |   blockquote {
 74 |     @apply border-l-2 border-gray-200 pl-3 mt-6 mb-8;
 75 |   }
 76 | 
 77 |   .highlight {
 78 |     @apply my-2;
 79 |     pre {
 80 |       @apply text-sm m-0 p-4;
 81 | 
 82 |       code {
 83 |         @apply bg-none p-0;
 84 |       }
 85 |     }
 86 |   }
 87 | 
 88 |   pre:has(code) {
 89 |     @apply p-2 m-4 bg-gray-100 rounded-lg overflow-x-auto;
 90 |   }
 91 | 
 92 |   pre {
 93 |     code {
 94 |       @apply bg-inherit text-sm font-mono;
 95 |     }
 96 |   }
 97 | 
 98 |   code {
 99 |     @apply bg-gray-200 px-1 rounded-md text-green-800;
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/assets/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | @theme {
 4 |   --color-orange-300: #f56642;
 5 |   --color-blue-100: #427bf5;
 6 |   --color-gray-50: #f8fafc;
 7 |   --color-gray-100: #f1f5f9;
 8 |   --color-gray-200: #e2e8f0;
 9 |   --color-green-800: #3f6212;
10 |   --color-green-900: #365314;
11 |   --color-green-950: #1a2e05;
12 | }
13 | 
14 | body {
15 |   @apply antialiased;
16 | }
17 | 
18 | @import "components/markdown.css";
19 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/content/_index.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: TailwindCSS 4 CLI Defer
  3 | ---
  4 | 
  5 | ## Some Markdown Sample Text
  6 | 
  7 | ### Philosophy
  8 | 
  9 | Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
 10 | 
 11 | Readability, however, is emphasized above all else. A Markdown-formatted
 12 | document should be publishable as-is, as plain text, without looking
 13 | like it's been marked up with tags or formatting instructions. While
 14 | Markdown's syntax has been influenced by several existing text-to-HTML
 15 | filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html),
 16 | [Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of
 17 | inspiration for Markdown's syntax is the format of plain text email.
 18 | 
 19 | A code block formatted with [Chroma](https://github.com/alecthomas/chroma) syntax highlighting:
 20 | 
 21 | ```go
 22 | // Cache is a simple thread safe cache backed by a map.
 23 | type Cache[K comparable, T any] struct {
 24 | 	m map[K]T
 25 | 	sync.RWMutex
 26 | }
 27 | 
 28 | ```
 29 | 
 30 | ## Block Elements
 31 | 
 32 | ### Paragraphs and Line Breaks
 33 | 
 34 | A paragraph is simply one or more consecutive lines of text, separated
 35 | by one or more blank lines. (A blank line is any line that looks like a
 36 | blank line -- a line containing nothing but spaces or tabs is considered
 37 | blank.) Normal paragraphs should not be indented with spaces or tabs.
 38 | 
 39 | The implication of the "one or more consecutive lines of text" rule is
 40 | that Markdown supports "hard-wrapped" text paragraphs. This differs
 41 | significantly from most other text-to-HTML formatters (including Movable
 42 | Type's "Convert Line Breaks" option) which translate every line break
 43 | character in a paragraph into a `<br />` tag.
 44 | 
 45 | When you *do* want to insert a `<br />` break tag using Markdown, you
 46 | end a line with two or more spaces, then type return.
 47 | 
 48 | ### Headers
 49 | 
 50 | Markdown supports two styles of headers, [Setext] [1] and [atx] [2].
 51 | 
 52 | Optionally, you may "close" atx-style headers. This is purely
 53 | cosmetic -- you can use this if you think it looks better. The
 54 | closing hashes don't even need to match the number of hashes
 55 | used to open the header. (The number of opening hashes
 56 | determines the header level.)
 57 | 
 58 | 
 59 | ### Blockquotes
 60 | 
 61 | Markdown uses email-style `>` characters for blockquoting. If you're
 62 | familiar with quoting passages of text in an email message, then you
 63 | know how to create a blockquote in Markdown. It looks best if you hard
 64 | wrap the text and put a `>` before every line:
 65 | 
 66 | > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
 67 | > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
 68 | > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
 69 | > 
 70 | > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
 71 | > id sem consectetuer libero luctus adipiscing.
 72 | 
 73 | Markdown allows you to be lazy and only put the `>` before the first
 74 | line of a hard-wrapped paragraph:
 75 | 
 76 | > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
 77 | consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
 78 | Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
 79 | 
 80 | > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
 81 | id sem consectetuer libero luctus adipiscing.
 82 | 
 83 | Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
 84 | adding additional levels of `>`:
 85 | 
 86 | > This is the first level of quoting.
 87 | >
 88 | > > This is nested blockquote.
 89 | >
 90 | > Back to the first level.
 91 | 
 92 | Blockquotes can contain other Markdown elements, including headers, lists,
 93 | and code blocks:
 94 | 
 95 | > ## This is a header.
 96 | > 
 97 | > 1.   This is the first list item.
 98 | > 2.   This is the second list item.
 99 | > 
100 | > Here's some example code:
101 | > 
102 | >     return shell_exec("echo $input | $markdown_script");
103 | 
104 | Any decent text editor should make email-style quoting easy. For
105 | example, with BBEdit, you can make a selection and choose Increase
106 | Quote Level from the Text menu.
107 | 
108 | 
109 | ### Lists
110 | 
111 | Markdown supports ordered (numbered) and unordered (bulleted) lists.
112 | 
113 | Unordered lists use asterisks, pluses, and hyphens -- interchangably
114 | -- as list markers:
115 | 
116 | *   Red
117 | *   Green
118 | *   Blue
119 | 
120 | is equivalent to:
121 | 
122 | +   Red
123 | +   Green
124 | +   Blue
125 | 
126 | and:
127 | 
128 | -   Red
129 | -   Green
130 | -   Blue
131 | 
132 | Ordered lists use numbers followed by periods:
133 | 
134 | 1.  Bird
135 | 2.  McHale
136 | 3.  Parish
137 | 
138 | It's important to note that the actual numbers you use to mark the
139 | list have no effect on the HTML output Markdown produces. The HTML
140 | Markdown produces from the above list is:
141 | 
142 | If you instead wrote the list in Markdown like this:
143 | 
144 | 1.  Bird
145 | 1.  McHale
146 | 1.  Parish
147 | 
148 | or even:
149 | 
150 | 3. Bird
151 | 1. McHale
152 | 8. Parish
153 | 
154 | you'd get the exact same HTML output. The point is, if you want to,
155 | you can use ordinal numbers in your ordered Markdown lists, so that
156 | the numbers in your source match the numbers in your published HTML.
157 | But if you want to be lazy, you don't have to.
158 | 
159 | To make lists look nice, you can wrap items with hanging indents:
160 | 
161 | *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
162 |     Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
163 |     viverra nec, fringilla in, laoreet vitae, risus.
164 | *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
165 |     Suspendisse id sem consectetuer libero luctus adipiscing.
166 | 
167 | But if you want to be lazy, you don't have to:
168 | 
169 | *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
170 | Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
171 | viverra nec, fringilla in, laoreet vitae, risus.
172 | *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
173 | Suspendisse id sem consectetuer libero luctus adipiscing.
174 | 
175 | List items may consist of multiple paragraphs. Each subsequent
176 | paragraph in a list item must be indented by either 4 spaces
177 | or one tab:
178 | 
179 | 1.  This is a list item with two paragraphs. Lorem ipsum dolor
180 |     sit amet, consectetuer adipiscing elit. Aliquam hendrerit
181 |     mi posuere lectus.
182 | 
183 |     Vestibulum enim wisi, viverra nec, fringilla in, laoreet
184 |     vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
185 |     sit amet velit.
186 | 
187 | 2.  Suspendisse id sem consectetuer libero luctus adipiscing.
188 | 
189 | It looks nice if you indent every line of the subsequent
190 | paragraphs, but here again, Markdown will allow you to be
191 | lazy:
192 | 
193 | *   This is a list item with two paragraphs.
194 | 
195 |     This is the second paragraph in the list item. You're
196 | only required to indent the first line. Lorem ipsum dolor
197 | sit amet, consectetuer adipiscing elit.
198 | 
199 | *   Another item in the same list.
200 | 
201 | To put a blockquote within a list item, the blockquote's `>`
202 | delimiters need to be indented:
203 | 
204 | *   A list item with a blockquote:
205 | 
206 |     > This is a blockquote
207 |     > inside a list item.
208 | 
209 | To put a code block within a list item, the code block needs
210 | to be indented *twice* -- 8 spaces or two tabs:
211 | 
212 | *   A list item with a code block:
213 | 
214 |         <code goes here>
215 | 
216 | ### Code Blocks
217 | 
218 | Pre-formatted code blocks are used for writing about programming or
219 | markup source code. Rather than forming normal paragraphs, the lines
220 | of a code block are interpreted literally. Markdown wraps a code block
221 | in both `<pre>` and `<code>` tags.
222 | 
223 | To produce a code block in Markdown, simply indent every line of the
224 | block by at least 4 spaces or 1 tab.
225 | 
226 | This is a normal paragraph:
227 | 
228 |     This is a code block.
229 | 
230 | Here is an example of AppleScript:
231 | 
232 |     tell application "Foo"
233 |         beep
234 |     end tell
235 | 
236 | A code block continues until it reaches a line that is not indented
237 | (or the end of the article).
238 | 
239 | Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
240 | are automatically converted into HTML entities. This makes it very
241 | easy to include example HTML source code using Markdown -- just paste
242 | it and indent it, and Markdown will handle the hassle of encoding the
243 | ampersands and angle brackets. For example, this:
244 | 
245 |     <div class="footer">
246 |         &copy; 2004 Foo Corporation
247 |     </div>
248 | 
249 | Regular Markdown syntax is not processed within code blocks. E.g.,
250 | asterisks are just literal asterisks within a code block. This means
251 | it's also easy to use Markdown to write about Markdown's own syntax.
252 | 
253 | ```
254 | tell application "Foo"
255 |     beep
256 | end tell
257 | ```
258 | 
259 | ## Span Elements
260 | 
261 | ### Links
262 | 
263 | Markdown supports two style of links: *inline* and *reference*.
264 | 
265 | In both styles, the link text is delimited by [square brackets].
266 | 
267 | To create an inline link, use a set of regular parentheses immediately
268 | after the link text's closing square bracket. Inside the parentheses,
269 | put the URL where you want the link to point, along with an *optional*
270 | title for the link, surrounded in quotes. For example:
271 | 
272 | This is [an example](http://example.com/) inline link.
273 | 
274 | [This link](http://example.net/) has no title attribute.
275 | 
276 | ### Emphasis
277 | 
278 | Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
279 | emphasis. Text wrapped with one `*` or `_` will be wrapped with an
280 | HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML
281 | `<strong>` tag. E.g., this input:
282 | 
283 | *single asterisks*
284 | 
285 | _single underscores_
286 | 
287 | **double asterisks**
288 | 
289 | __double underscores__
290 | 
291 | ### Code
292 | 
293 | To indicate a span of code, wrap it with backtick quotes (`` ` ``).
294 | Unlike a pre-formatted code block, a code span indicates code within a
295 | normal paragraph. For example:
296 | 
297 | Use the `printf()` function.


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/hugo.toml:
--------------------------------------------------------------------------------
 1 | baseURL      = 'https://example.org/'
 2 | title        = 'Tailwind CSS CLI Simple'
 3 | disableKinds = ['taxonomy', 'term', "page", "section", "sitemap"]
 4 | 
 5 | [outputs]
 6 |     home = ["html"]
 7 | 
 8 | [module]
 9 |     [module.hugoVersion]
10 |         min = "0.128.0"
11 |     [[module.mounts]]
12 |         source = "assets"
13 |         target = "assets"
14 |     [[module.mounts]]
15 |         source = "content"
16 |         target = "content"
17 |     [[module.mounts]]
18 |         source       = "hugo_stats.json"
19 |         target       = "assets/notwatching/hugo_stats.json"
20 |         disableWatch = true
21 | [build.buildStats]
22 |     enable = true
23 | [[build.cachebusters]]
24 |     source = "assets/notwatching/hugo_stats\\.json"
25 |     target = "css"
26 | [[build.cachebusters]]
27 |     source = "(postcss|tailwind)\\.config\\.js"
28 |     target = "css"
29 | 
30 | [markup]
31 |     [markup.highlight]
32 |         style = 'github'
33 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/hugo_stats.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "htmlElements": {
 3 |     "tags": [
 4 |       "a",
 5 |       "article",
 6 |       "blockquote",
 7 |       "body",
 8 |       "code",
 9 |       "div",
10 |       "em",
11 |       "h1",
12 |       "h2",
13 |       "h3",
14 |       "head",
15 |       "html",
16 |       "li",
17 |       "meta",
18 |       "ol",
19 |       "p",
20 |       "pre",
21 |       "script",
22 |       "strong",
23 |       "title",
24 |       "ul"
25 |     ],
26 |     "classes": [
27 |       "bg-green-50",
28 |       "font-bold",
29 |       "highlight",
30 |       "markdown",
31 |       "max-w-[90ch]",
32 |       "mb-4",
33 |       "md:p-6",
34 |       "mx-auto",
35 |       "my-10",
36 |       "p-2",
37 |       "rounded-lg",
38 |       "text-3xl",
39 |       "text-black",
40 |       "tracking-tight",
41 |       "uppercase"
42 |     ],
43 |     "ids": [
44 |       "block-elements",
45 |       "blockquotes",
46 |       "code",
47 |       "code-blocks",
48 |       "emphasis",
49 |       "headers",
50 |       "links",
51 |       "lists",
52 |       "paragraphs-and-line-breaks",
53 |       "philosophy",
54 |       "some-markdown-sample-text",
55 |       "span-elements",
56 |       "this-is-a-header"
57 |     ]
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/layouts/_default/baseof.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>
 6 |       {{ .Title }}
 7 |     </title>
 8 |     <meta name="description" content="{{ .Description }}" />
 9 |     {{ with (templates.Defer (dict "key" "global")) }}
10 |       {{ $t := debug.Timer "tailwindcss" }}
11 |       {{ with resources.Get "css/styles.css" }}
12 |         {{ $opts := dict
13 |           "inlineImports" true
14 |           "optimize" (not hugo.IsDevelopment)
15 |         }}
16 |         {{ with . | css.TailwindCSS $opts }}
17 |           {{ if hugo.IsDevelopment }}
18 |             <link rel="stylesheet" href="{{ .RelPermalink }}" />
19 |           {{ else }}
20 |             {{ with . | minify | fingerprint }}
21 |               <link
22 |                 rel="stylesheet"
23 |                 href="{{ .RelPermalink }}"
24 |                 integrity="{{ .Data.Integrity }}"
25 |                 crossorigin="anonymous" />
26 |             {{ end }}
27 |           {{ end }}
28 |         {{ end }}
29 |       {{ end }}
30 |       {{ $t.Stop }}
31 |     {{ end }}
32 |   </head>
33 |   <body class="my-10">
34 |     {{ block "main" . }}{{ end }}
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/layouts/index.html:
--------------------------------------------------------------------------------
 1 | {{ define "main" }}
 2 |   <article class="mx-auto max-w-[90ch] bg-green-50 p-2 md:p-6 rounded-lg">
 3 |     <h1 class="text-3xl mb-4 tracking-tight text-black font-bold uppercase">
 4 |       {{ .Title }}
 5 |     </h1>
 6 | 
 7 |     <div class="markdown">
 8 |       {{ .Content }}
 9 |     </div>
10 |   </article>
11 | {{ end }}
12 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-cli-simple",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "devDependencies": {
12 |     "@tailwindcss/cli": "^4.0.0",
13 |     "tailwindcss": "^4.0.0"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-defer/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | This file is present to satisy a requiremenet of the Tailwind CSS IntelliSense
3 | extension for Visual Studio Code.
4 | 
5 | https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
6 | 
7 | The rest of this file is intentionally empty.
8 | */
9 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/.gitignore:
--------------------------------------------------------------------------------
1 | public/
2 | node_modules/
3 | package-lock.json
4 | .hugo_build.lock
5 | resources/


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/README.md:
--------------------------------------------------------------------------------
1 | 
2 | ## Install
3 | 
4 | ```
5 | npm i
6 | hugo server
7 | ```
8 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/assets/css/components/markdown.css:
--------------------------------------------------------------------------------
  1 | .markdown {
  2 |   @apply text-gray-900 font-serif;
  3 | 
  4 |   h1,
  5 |   h2,
  6 |   h3,
  7 |   h4,
  8 |   h5 {
  9 |     @apply font-sans tracking-tight;
 10 |   }
 11 | 
 12 |   h1 {
 13 |     @apply text-3xl font-bold;
 14 |   }
 15 | 
 16 |   h2 {
 17 |     @apply text-2xl font-bold;
 18 |   }
 19 | 
 20 |   h3 {
 21 |     @apply text-xl font-bold;
 22 |   }
 23 | 
 24 |   h4 {
 25 |     @apply text-lg font-bold;
 26 |   }
 27 | 
 28 |   h5 {
 29 |     @apply text-base font-bold;
 30 |   }
 31 | 
 32 |   h6 {
 33 |     @apply text-sm font-bold;
 34 |   }
 35 | 
 36 |   p + h2,
 37 |   p + h3,
 38 |   ul + h2,
 39 |   ul + h3,
 40 |   ol + h2,
 41 |   ol + h3 {
 42 |     @apply mt-6;
 43 |   }
 44 | 
 45 |   h2 + h3 {
 46 |     @apply mt-2;
 47 |   }
 48 | 
 49 |   p {
 50 |     @apply text-base mt-2 leading-relaxed;
 51 |   }
 52 | 
 53 |   a {
 54 |     @apply text-blue-600 underline;
 55 |   }
 56 | 
 57 |   a:hover {
 58 |     @apply text-blue-800;
 59 |   }
 60 | 
 61 |   ul {
 62 |     @apply list-disc pl-4 mt-2;
 63 |   }
 64 | 
 65 |   ol {
 66 |     @apply list-decimal pl-4 mt-2;
 67 |   }
 68 | 
 69 |   li:not(:last-child) {
 70 |     @apply mb-2;
 71 |   }
 72 | 
 73 |   blockquote {
 74 |     @apply border-l-2 border-gray-200 pl-3 mt-6 mb-8;
 75 |   }
 76 | 
 77 |   .highlight {
 78 |     @apply my-2;
 79 |     pre {
 80 |       @apply text-sm m-0 p-4;
 81 | 
 82 |       code {
 83 |         @apply bg-none p-0;
 84 |       }
 85 |     }
 86 |   }
 87 | 
 88 |   pre:has(code) {
 89 |     @apply p-2 m-4 bg-gray-100 rounded-lg overflow-x-auto;
 90 |   }
 91 | 
 92 |   pre {
 93 |     code {
 94 |       @apply bg-inherit text-sm font-mono;
 95 |     }
 96 |   }
 97 | 
 98 |   code {
 99 |     @apply bg-gray-200 px-1 rounded-md text-green-800;
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/assets/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | @theme {
 4 |   --color-orange-300: #f56642;
 5 |   --color-blue-100: #427bf5;
 6 |   --color-gray-50: #f8fafc;
 7 |   --color-gray-100: #f1f5f9;
 8 |   --color-gray-200: #e2e8f0;
 9 |   --color-green-800: #3f6212;
10 |   --color-green-900: #365314;
11 |   --color-green-950: #1a2e05;
12 | }
13 | 
14 | body {
15 |   @apply antialiased;
16 | }
17 | 
18 | @import "components/markdown.css";
19 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/content/_index.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: TailwindCSS 4 CLI Simple
  3 | ---
  4 | 
  5 | ## Some Markdown Sample Text
  6 | 
  7 | ### Philosophy
  8 | 
  9 | Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
 10 | 
 11 | Readability, however, is emphasized above all else. A Markdown-formatted
 12 | document should be publishable as-is, as plain text, without looking
 13 | like it's been marked up with tags or formatting instructions. While
 14 | Markdown's syntax has been influenced by several existing text-to-HTML
 15 | filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html),
 16 | [Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of
 17 | inspiration for Markdown's syntax is the format of plain text email.
 18 | 
 19 | A code block formatted with [Chroma](https://github.com/alecthomas/chroma) syntax highlighting:
 20 | 
 21 | ```go
 22 | // Cache is a simple thread safe cache backed by a map.
 23 | type Cache[K comparable, T any] struct {
 24 | 	m map[K]T
 25 | 	sync.RWMutex
 26 | }
 27 | 
 28 | ```
 29 | 
 30 | ## Block Elements
 31 | 
 32 | ### Paragraphs and Line Breaks
 33 | 
 34 | A paragraph is simply one or more consecutive lines of text, separated
 35 | by one or more blank lines. (A blank line is any line that looks like a
 36 | blank line -- a line containing nothing but spaces or tabs is considered
 37 | blank.) Normal paragraphs should not be indented with spaces or tabs.
 38 | 
 39 | The implication of the "one or more consecutive lines of text" rule is
 40 | that Markdown supports "hard-wrapped" text paragraphs. This differs
 41 | significantly from most other text-to-HTML formatters (including Movable
 42 | Type's "Convert Line Breaks" option) which translate every line break
 43 | character in a paragraph into a `<br />` tag.
 44 | 
 45 | When you *do* want to insert a `<br />` break tag using Markdown, you
 46 | end a line with two or more spaces, then type return.
 47 | 
 48 | ### Headers
 49 | 
 50 | Markdown supports two styles of headers, [Setext] [1] and [atx] [2].
 51 | 
 52 | Optionally, you may "close" atx-style headers. This is purely
 53 | cosmetic -- you can use this if you think it looks better. The
 54 | closing hashes don't even need to match the number of hashes
 55 | used to open the header. (The number of opening hashes
 56 | determines the header level.)
 57 | 
 58 | 
 59 | ### Blockquotes
 60 | 
 61 | Markdown uses email-style `>` characters for blockquoting. If you're
 62 | familiar with quoting passages of text in an email message, then you
 63 | know how to create a blockquote in Markdown. It looks best if you hard
 64 | wrap the text and put a `>` before every line:
 65 | 
 66 | > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
 67 | > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
 68 | > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
 69 | > 
 70 | > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
 71 | > id sem consectetuer libero luctus adipiscing.
 72 | 
 73 | Markdown allows you to be lazy and only put the `>` before the first
 74 | line of a hard-wrapped paragraph:
 75 | 
 76 | > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
 77 | consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
 78 | Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
 79 | 
 80 | > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
 81 | id sem consectetuer libero luctus adipiscing.
 82 | 
 83 | Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
 84 | adding additional levels of `>`:
 85 | 
 86 | > This is the first level of quoting.
 87 | >
 88 | > > This is nested blockquote.
 89 | >
 90 | > Back to the first level.
 91 | 
 92 | Blockquotes can contain other Markdown elements, including headers, lists,
 93 | and code blocks:
 94 | 
 95 | > ## This is a header.
 96 | > 
 97 | > 1.   This is the first list item.
 98 | > 2.   This is the second list item.
 99 | > 
100 | > Here's some example code:
101 | > 
102 | >     return shell_exec("echo $input | $markdown_script");
103 | 
104 | Any decent text editor should make email-style quoting easy. For
105 | example, with BBEdit, you can make a selection and choose Increase
106 | Quote Level from the Text menu.
107 | 
108 | 
109 | ### Lists
110 | 
111 | Markdown supports ordered (numbered) and unordered (bulleted) lists.
112 | 
113 | Unordered lists use asterisks, pluses, and hyphens -- interchangably
114 | -- as list markers:
115 | 
116 | *   Red
117 | *   Green
118 | *   Blue
119 | 
120 | is equivalent to:
121 | 
122 | +   Red
123 | +   Green
124 | +   Blue
125 | 
126 | and:
127 | 
128 | -   Red
129 | -   Green
130 | -   Blue
131 | 
132 | Ordered lists use numbers followed by periods:
133 | 
134 | 1.  Bird
135 | 2.  McHale
136 | 3.  Parish
137 | 
138 | It's important to note that the actual numbers you use to mark the
139 | list have no effect on the HTML output Markdown produces. The HTML
140 | Markdown produces from the above list is:
141 | 
142 | If you instead wrote the list in Markdown like this:
143 | 
144 | 1.  Bird
145 | 1.  McHale
146 | 1.  Parish
147 | 
148 | or even:
149 | 
150 | 3. Bird
151 | 1. McHale
152 | 8. Parish
153 | 
154 | you'd get the exact same HTML output. The point is, if you want to,
155 | you can use ordinal numbers in your ordered Markdown lists, so that
156 | the numbers in your source match the numbers in your published HTML.
157 | But if you want to be lazy, you don't have to.
158 | 
159 | To make lists look nice, you can wrap items with hanging indents:
160 | 
161 | *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
162 |     Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
163 |     viverra nec, fringilla in, laoreet vitae, risus.
164 | *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
165 |     Suspendisse id sem consectetuer libero luctus adipiscing.
166 | 
167 | But if you want to be lazy, you don't have to:
168 | 
169 | *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
170 | Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
171 | viverra nec, fringilla in, laoreet vitae, risus.
172 | *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
173 | Suspendisse id sem consectetuer libero luctus adipiscing.
174 | 
175 | List items may consist of multiple paragraphs. Each subsequent
176 | paragraph in a list item must be indented by either 4 spaces
177 | or one tab:
178 | 
179 | 1.  This is a list item with two paragraphs. Lorem ipsum dolor
180 |     sit amet, consectetuer adipiscing elit. Aliquam hendrerit
181 |     mi posuere lectus.
182 | 
183 |     Vestibulum enim wisi, viverra nec, fringilla in, laoreet
184 |     vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
185 |     sit amet velit.
186 | 
187 | 2.  Suspendisse id sem consectetuer libero luctus adipiscing.
188 | 
189 | It looks nice if you indent every line of the subsequent
190 | paragraphs, but here again, Markdown will allow you to be
191 | lazy:
192 | 
193 | *   This is a list item with two paragraphs.
194 | 
195 |     This is the second paragraph in the list item. You're
196 | only required to indent the first line. Lorem ipsum dolor
197 | sit amet, consectetuer adipiscing elit.
198 | 
199 | *   Another item in the same list.
200 | 
201 | To put a blockquote within a list item, the blockquote's `>`
202 | delimiters need to be indented:
203 | 
204 | *   A list item with a blockquote:
205 | 
206 |     > This is a blockquote
207 |     > inside a list item.
208 | 
209 | To put a code block within a list item, the code block needs
210 | to be indented *twice* -- 8 spaces or two tabs:
211 | 
212 | *   A list item with a code block:
213 | 
214 |         <code goes here>
215 | 
216 | ### Code Blocks
217 | 
218 | Pre-formatted code blocks are used for writing about programming or
219 | markup source code. Rather than forming normal paragraphs, the lines
220 | of a code block are interpreted literally. Markdown wraps a code block
221 | in both `<pre>` and `<code>` tags.
222 | 
223 | To produce a code block in Markdown, simply indent every line of the
224 | block by at least 4 spaces or 1 tab.
225 | 
226 | This is a normal paragraph:
227 | 
228 |     This is a code block.
229 | 
230 | Here is an example of AppleScript:
231 | 
232 |     tell application "Foo"
233 |         beep
234 |     end tell
235 | 
236 | A code block continues until it reaches a line that is not indented
237 | (or the end of the article).
238 | 
239 | Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
240 | are automatically converted into HTML entities. This makes it very
241 | easy to include example HTML source code using Markdown -- just paste
242 | it and indent it, and Markdown will handle the hassle of encoding the
243 | ampersands and angle brackets. For example, this:
244 | 
245 |     <div class="footer">
246 |         &copy; 2004 Foo Corporation
247 |     </div>
248 | 
249 | Regular Markdown syntax is not processed within code blocks. E.g.,
250 | asterisks are just literal asterisks within a code block. This means
251 | it's also easy to use Markdown to write about Markdown's own syntax.
252 | 
253 | ```
254 | tell application "Foo"
255 |     beep
256 | end tell
257 | ```
258 | 
259 | ## Span Elements
260 | 
261 | ### Links
262 | 
263 | Markdown supports two style of links: *inline* and *reference*.
264 | 
265 | In both styles, the link text is delimited by [square brackets].
266 | 
267 | To create an inline link, use a set of regular parentheses immediately
268 | after the link text's closing square bracket. Inside the parentheses,
269 | put the URL where you want the link to point, along with an *optional*
270 | title for the link, surrounded in quotes. For example:
271 | 
272 | This is [an example](http://example.com/) inline link.
273 | 
274 | [This link](http://example.net/) has no title attribute.
275 | 
276 | ### Emphasis
277 | 
278 | Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
279 | emphasis. Text wrapped with one `*` or `_` will be wrapped with an
280 | HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML
281 | `<strong>` tag. E.g., this input:
282 | 
283 | *single asterisks*
284 | 
285 | _single underscores_
286 | 
287 | **double asterisks**
288 | 
289 | __double underscores__
290 | 
291 | ### Code
292 | 
293 | To indicate a span of code, wrap it with backtick quotes (`` ` ``).
294 | Unlike a pre-formatted code block, a code span indicates code within a
295 | normal paragraph. For example:
296 | 
297 | Use the `printf()` function.


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/hugo.toml:
--------------------------------------------------------------------------------
 1 | baseURL      = 'https://example.org/'
 2 | title        = 'Tailwind CSS CLI Simple'
 3 | disableKinds = ['taxonomy', 'term', "page", "section", "sitemap"]
 4 | 
 5 | [outputs]
 6 |     home = ["html"]
 7 | 
 8 | [[build.cachebusters]]
 9 |     source = 'layouts/.*'
10 |     target = 'css'
11 | 
12 | [markup]
13 |     [markup.highlight]
14 |         style = 'github'
15 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/layouts/_default/baseof.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>
 6 |       {{ .Title }}
 7 |     </title>
 8 |     <meta name="description" content="{{ .Description }}" />
 9 |     {{ $t := debug.Timer "tailwindcss" }}
10 |     {{ with resources.Get "css/styles.css" }}
11 |       {{ $opts := dict
12 |         "inlineImports" true
13 |         "optimize" (not hugo.IsDevelopment)
14 |       }}
15 |       {{ with . | css.TailwindCSS $opts }}
16 |         {{ if hugo.IsDevelopment }}
17 |           <link rel="stylesheet" href="{{ .RelPermalink }}" />
18 |         {{ else }}
19 |           {{ with . | minify | fingerprint }}
20 |             <link
21 |               rel="stylesheet"
22 |               href="{{ .RelPermalink }}"
23 |               integrity="{{ .Data.Integrity }}"
24 |               crossorigin="anonymous" />
25 |           {{ end }}
26 |         {{ end }}
27 |       {{ end }}
28 |     {{ end }}
29 | 
30 |     {{ $t.Stop }}
31 |   </head>
32 |   <body class="my-10">
33 |     {{ block "main" . }}{{ end }}
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/layouts/index.html:
--------------------------------------------------------------------------------
 1 | {{ define "main" }}
 2 |   <article class="mx-auto max-w-[90ch] bg-slate-50 p-2 md:p-6 rounded-lg">
 3 |     <h1 class="text-3xl mb-4 tracking-tight text-black font-bold uppercase">
 4 |       {{ .Title }}
 5 |     </h1>
 6 | 
 7 |     <div class="markdown">
 8 |       {{ .Content }}
 9 |     </div>
10 |   </article>
11 | {{ end }}
12 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-cli-simple",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "devDependencies": {
12 |     "@tailwindcss/cli": "^4.0.0",
13 |     "tailwindcss": "^4.0.0"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/tailwindcss-cli-simple/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | This file is present to satisy a requiremenet of the Tailwind CSS IntelliSense
3 | extension for Visual Studio Code.
4 | 
5 | https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
6 | 
7 | The rest of this file is intentionally empty.
8 | */
9 | 


--------------------------------------------------------------------------------