[v4] Tailwind CLI for Windows x64 not working

[johnmeilleur]

What version of Tailwind CSS are you using?

tailwindcss v4.0.0-beta.9

What build tool (or framework if it abstracts the build tool) are you using?

tailwindcss-windows-x64.exe

What version of Node.js are you using?

N/A

What browser are you using?

N/A

What operating system are you using?

Windows 11

Describe your issue

The Windows CLI does not appear to be working.

.\tailwind-windows-x64.exe -i tailwind.css -o wwwroot\output.css

tailwind.css

@import "tailwindcss";

@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-avocado-100: oklch(0.99 0 0);
--color-avocado-200: oklch(0.98 0.04 113.22);
--color-avocado-300: oklch(0.94 0.11 115.03);
--color-avocado-400: oklch(0.92 0.19 114.08);
--color-avocado-500: oklch(0.84 0.18 117.33);
--color-avocado-600: oklch(0.53 0.12 118.34);
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
/* ... */
}

output.css

@import "tailwindcss";

@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-avocado-100: oklch(0.99 0 0);
--color-avocado-200: oklch(0.98 0.04 113.22);
--color-avocado-300: oklch(0.94 0.11 115.03);
--color-avocado-400: oklch(0.92 0.19 114.08);
--color-avocado-500: oklch(0.84 0.18 117.33);
--color-avocado-600: oklch(0.53 0.12 118.34);
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
/* ... */
}

[Renerick]

Check your file encoding. I found that it happens if I have UTF-8 with BOM. Removing BOM fixes the CLI

There is an issue about this #15467

[moshegutman]

Yep! That fixed it for me too! If you're using Visual Studio, click Save As, then click the down arrow near the Save button and select "Save with Encoding". In the dialog, select "Unicode (UTF-8 without signature) - Codepage 65001". I followed the instructions here: https://stackoverflow.com/questions/5406172/utf-8-without-bom

[johnmeilleur]

Thanks @Renerick and @moshegutman that did the trick for me as well.

[Trix07]

Having a wrong encoding can also lead to unexpected output like this:

/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
@import "tailwindcss: @import "tailwindcss";

This seems to be an oversight in the release of v4 since any css file you add with Visual Studio 2022 will have the wrong encoding and, therefore, not work. This can cause a lot of frustration when setting up Tailwind. I personally spent several hours just trying to get it to build correctly.

[alvaromarithompson]

The same goes for JetBrains Rider on Windows, any new source files are added as UTF-8 with BOM.

Default options for JetBrains Rider:

[philipp-spiess]

Hey folks! Reading an UTF-8 file with BOM now works as of the latest patch release. Thanks!