Tailwind CSS 4 Compilation Issues with GitHub Actions
- Fixing the UTF8Error

Tailwind CSS 4 Compilation Issues with GitHub Actions

I recently upgraded Ruby Static Pro to use Tailwind CSS 4 and run into some issues with compiling the CSS on GitHub Actions with ubuntu-latest as the agent.

The code would compile fine on my local machine (macOS), but when I pushed the code to GitHub, the CI/CD pipeline would fail with an error. 🤔

The error I was getting was:

⚡ Done in 10ms
| == External: > build:css
| == External: > tailwindcss -i source/stylesheets/site.css -o .tmp/dist/site.css
| 
| thread '<unnamed>' panicked at crates/oxide/src/extractor/pre_processors/ruby.rs:37:59:
| called `Result::unwrap()` on an `Err` value: Utf8Error { valid_up_to: 0, error_len: Some(1) }
| stack backtrace:
|    0:     0xffff541377c4 - <unknown>
|    1:     0xffff540726a0 - <unknown>
|    2:     0xffff54136f54 - <unknown>
|    3:     0xffff54137598 - <unknown>
|    4:     0xffff54136cd8 - <unknown>
|    5:     0xffff54160ae8 - <unknown>
|    6:     0xffff54160a60 - <unknown>
|    7:     0xffff54161018 - <unknown>
|    8:     0xffff54038c98 - <unknown>
|    9:     0xffff54038f04 - <unknown>
|   10:     0xffff541a0a8c - <unknown>
|   11:     0xffff5417acec - <unknown>
|   12:     0xffff5417f10c - <unknown>
|   13:     0xffff541a480c - <unknown>
|   14:     0xffff5417f350 - <unknown>
|   15:     0xffff54193e74 - <unknown>
|   16:     0xffff541a4994 - <unknown>
|   17:     0xffff5417f350 - <unknown>
|   18:     0xffff54193e74 - <unknown>
|   19:     0xffff541a4994 - <unknown>
|   20:     0xffff5417f350 - <unknown>
|   21:     0xffff54193e74 - <unknown>
|   22:     0xffff541a4994 - <unknown>
|   23:     0xffff5417f350 - <unknown>
|   24:     0xffff541a480c - <unknown>
|   25:     0xffff5417f350 - <unknown>
|   26:     0xffff541a480c - <unknown>
|   27:     0xffff5417f350 - <unknown>
|   28:     0xffff54196f30 - <unknown>
|   29:     0xffff5403dfe8 - <unknown>
|   30:     0xffff540b4a94 - <unknown>
|   31:     0xffff540b66e4 - <unknown>
|   32:     0xffff54161094 - <unknown>
|   33:     0xffff823ed5c8 - <unknown>
|   34:     0xffff82455edc - <unknown>
|   35:                0x0 - <unknown>
| fatal runtime error: failed to initiate panic, error 283896592
| Aborted
| == External: Command failed with non-zero exit status

This was an error with the Tailwind CSS 4 Rust Compiler. The error was initially very confusing as there was not backtrace, so I added the following to the GitHub action step:

- name: Build Middleman site
  run: bundle exec middleman build # My tailwindcss compilation step was called in here
  env:
    RUST_BACKTRACE: full

This would then allow me to see the full backtrace of the error, but it still was not super helpful.

Fixing the UTF8Error

The problem ended up being that I needed to provide the tailwindcss cli with a path to look for sources. It was looking in god knows where before and it was finding files that were giving it problems with UTF-8 encoding.

I had to specify the location of the source files in the new Tailwind CSS 4 css import command like this:

- @import 'tailwindcss';
+ @import 'tailwindcss' source("../");

It needed to be in ../source because the site.css file in Ruby Static Pro is in the /stylesheets folder.

The first line will crash the Tailwind CSS compiler, but when you add the source that Tailwind CSS should look in, the error goes away.

Hopefully this helps you solve your error as well, if you’re running into it.

Hat tip to this comment for giving me the idea to try this.

Tailwind CSS 4 Rust Compilation UTF8Error on GitHub Actions

How we resolved the Utf8Error Rust compilation error on GitHub Actions after updating to Tailwind CSS 4.

Tailwind CSS 4 Compilation Issues with GitHub Actions

Fixing the UTF8Error