Tailwind CSS JIT

support
1

Is anyone using this yet?

I’m trying to get it to work, but running into issues.

baseof.html

{{ $styles := resources.Get “css/tailwind.css” | postCSS }}
< link href=“{{ $styles.RelPermalink }}” rel=“stylesheet” />

postcss.config.js

module.exports = {
    plugins: {
        '@tailwindcss/jit': {},
        autoprefixer: {},
    },
}

I’m getting the following error:
Error: Error building site: POSTCSS: failed to transform “css/tailwind.css” (text/css): Error: ENOENT: no such file or directory, stat ‘/Users/erik/Downloads/sites/hugo/stdin’

2

Actually, looks like it’s related to the following: css-loader can't handle paths with spaces · Issue #22 · tailwindlabs/tailwindcss-jit · GitHub

1 Like
3

I haven’t tested this (looks cool), but I’m guessing that the reason this does not work is that it doesn’t support stdin as input (it expects a file) – we could fix that on the Hugo side (by creating a temp file), but I suspect we need to look at some other aspects of this as well (I see some mention about file watching of templates).

Anyhow, could you create an issue on the Hugo GitHub issue tracker?

1 Like
4
1 Like
5

I had read that Tailwind JIT will be made available for Hugo in version v8.4**.

For now, as long as the Tailwind JIT compiler is not(not handy) yet available in Hugo, here is a quick and dirty example.
With this example, you can edit Hugo layouts with the livereload, tailwindcss jit compiler.

2 Likes
6

There is another way to solve this using only Hugo pipes. I wrote a small article about this.

https://dev.to/jonas_duri/how-to-use-tailwindcss-30-without-external-npm-scripts-just-hugo-pipes-2lg9

Please also take a look at this discussion about the proposed solution.

2 Likes
7

I receive this error when using this method

execute of template failed: template: partials/head.html:9:15: executing "partials/head.html" at <resources.PostCSS>: error calling PostCSS: type <nil> not supported in Resource transformations

code in themes>npmtest>layouts>partials>head.html

<head>
{{ 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 }}
</head>