How to use TailwindCSS 3.0 without external NPM scripts, just Hugo pipes

Jonas Duri — Sun, 16 Jan 2022 19:20:35 +0000

tldr; Here is a working demo: https://github.com/Gioni06/hugo-pipes-tailwind-3

TailwindCSS is a utility-first CSS framework for rapid UI development and as of version 3, the JIT mode is the new default. Among other benefits, it renders a CSS file, that only contains the code, that your site is actually using -- nothing more!

1. What changed since TailwindCSS 3

Since version 3, TailwindCSS only uses the JIT compiler to do its magic. That means, that utility classes will be generated on demand instead of purging unused classes afterward. The thing with TailwindCSS is, that only the compilation result changes, not the input file. For this reason, Hugo Pipes won't work beyond the initial render pass. This behavior is perfectly fine for a production build, but it doesn't detect changes when running a Hugo development server in "watch" mode.

{{/* Doesn't work in "watch" mode */}}
{{ $style := resources.Get "tailwind.css" | resources.PostCSS | resources.Minify }}

2. How to use TailwindCSS without external NPM scripts, just Hugo Pipes

First up, we use TailwindCSS as a PostCSS plugin. This is key to using Hugo's build-in resources.PostCSS pipe. You can read how to setup PostCSS with TailwindCSS here: https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor

To make work in both production and development the "Hugo Way", I came up with a little hack. Rather than using the input file as a regular CSS resource, we can tell Hugo to treat it like a template file using the resources.ExecuteAsTemplate pipe.

To ensure that the result always changes, we can create a random string and pass it into the CSS input template. Also, the final CSS file has the generated random string as part of its file name.

Note that this is only necessary during development. In production, a single render pass by Hugo is all it takes to work with TailwindCSS.

This is the complete code that I came up with.

{{ if .Site.IsServer }}
    {{ $seed := "weqklrjfmnk213409ufasdfhnlk3j4bladsfsl" }}
    {{ $random := delimit (shuffle (split (md5 $seed) "" )) "" }}
    {{
    $style := resources.Get "tailwind.css"
    | resources.PostCSS
    | resources.ExecuteAsTemplate (printf "tailwind.dev.%s.css" $random) $random
    }}
    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ else }}
    {{
    $style := resources.Get "tailwind.css"
        | resources.PostCSS
        | resources.Minify
    }}
    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ end }}

3. Conclusions

In this article, we discussed how to use TailwindCSS without external NPM scripts by using Hugo pipes. First, we discussed how to use the JIT mode in TailwindCSS 3.0. Next, I showed how to use Hugo pipes to treat the input file like a template so that it always triggers a re-compilation when running Hugo in "watch" mode.

4. References and further reading

Deploy Astro site to sub-path

Jonas Duri — Thu, 28 Oct 2021 07:37:34 +0000

Astro is a static site generator which enables you to use a familiar javascript component architecture while shipping less client-side Javascript.

Problem with Sub-Path deployment

When you are not using a custom domain, Gitlab Pages deploys your website to a sub-path, e.g., http(s)://username.example.io/repository-name/.
Due to an open bug, Astro ignores the buildConfig.site configuration, which is necessary to rewrite all asset paths.

Solution

This is a small script which manually touches all files in the output directory and rewrites the paths. To use the script, copy it to your project’s root folder and name the file postbuild.mjs.

import fs from 'fs'
import path from 'path'
import astroConfig from './astro.config.mjs'


const PUBLIC_DIR = astroConfig.dist || "dist"
const argvs = process.argv.slice(2);

if ((argvs[0] === '--p' || argvs[0] === '-path') && argvs[1]) {
    let files = [];
    const extensions = ['.html', '.css', '.js', '.json']
    const PRODUCTION_URL = argvs[1]


    const replaceUrlsInFiles = function(dirPath, arrayOfFiles) {
        files = fs.readdirSync(dirPath)

        files.forEach(function(file) {
            const current = fs.statSync(dirPath + "/" + file)
            if (current.isDirectory()) {
                replaceUrlsInFiles(dirPath + "/" + file, arrayOfFiles)
            } else {
                const filePath = path.join(
                    path.dirname(
                        (
                            import.meta.url).replace(/file\:/, '')), dirPath, "/", file)
                if (extensions.includes(path.extname(filePath))) {
                    let content = fs.readFileSync(filePath)

                    content = String(content).replace(/src="\//g, `src="${PRODUCTION_URL}`)
                    content = String(content).replace(/href="\//g, `href="${PRODUCTION_URL}`)
                    content = String(content).replace(/url\("\//g, `url("${PRODUCTION_URL}`)

                    content = String(content).replace(/src='\//g, `src='${PRODUCTION_URL}`)
                    content = String(content).replace(/href='\//g, `href='${PRODUCTION_URL}`)
                    content = String(content).replace(/url\('\//g, `url('${PRODUCTION_URL}`)
                    fs.writeFileSync(filePath, content)
                }
            }
        })
    }

    if (PRODUCTION_URL && process.env.NODE_ENV === 'production') {
        replaceUrlsInFiles(PUBLIC_DIR, files)
    } else {
        console.log('skip postbuild')
        process.exit(0)
    }
} else {
    console.error('please provide a path argument "-path", "--p"')
    process.exit(1)
}

You can now use the script as a post-build hook via NPM scripts.

{
    "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "postbuild": "node ./postbuild.mjs -path https://username.example.io/repository-name/",
        "preview": "astro preview"
    },
}

Conclusion

I hope this script helps you out until the bug in Astro is fixed. If you have some time to spare, please consider contributing to Astro :)

DEV Community: Jonas Duri