[v4] FreeBSD: Cannot find module @tailwindcss/oxide-freebsd-x64/tailwindcss-oxide.freebsd-x64.node

[silenius]

What version of Tailwind CSS are you using?

4.0.0

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

vue3
vite/6.0.11 freebsd-x64 node-v20.12.2

What version of Node.js are you using?

20.12.2

What browser are you using?

Firefox

What operating system are you using?

FreeBSD

Describe your issue

~/code/projects/amnesia_admin/ npx vite --host 127.0.0.1 --port 3000 --base /bbpf/admin/
failed to load config from /usr/home/jcigar/code/projects/amnesia_admin/vite.config.mjs
error when starting dev server:
Error: Cannot find module '/usr/home/jcigar/code/projects/amnesia_admin/node_modules/@tailwindcss/oxide-freebsd-x64/tailwindcss-oxide.freebsd-x64.node'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:443:19)
    at Module._findPath (node:internal/modules/cjs/loader:714:18)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1129:27)
    at Module._load (node:internal/modules/cjs/loader:984:27)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/usr/home/jcigar/code/projects/amnesia_admin/node_modules/@tailwindcss/oxide/index.js:160:25)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)

This is with:

~/code/projects/amnesia_admin/ cat tailwind.config.mjs 
import { fontFamily } from './src/fonts'

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: fontFamily,
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
  safelist: [
        {
            pattern : /font-/,
            variants: ['hover', 'sm', 'md', 'lg', 'xl', '2xl']
        },
        /*
    {
      pattern: /(font|h|w|px|py|pt|pb|pl|pr|mx|my|mt|mb|ml|mr|text|bg|outline)-/,
      variants: ['hover', 'sm', 'md', 'lg', 'xl', '2xl']
    }
        */
  ]
}

Thanks!

[silenius]

It looks like the binary is missing in the dependency, see https://www.npmjs.com/package/@tailwindcss/oxide-freebsd-x64?activeTab=code

[Shrunky]

Had to switch to Debian and update my Dockerfile to get this working:

FROM node:22.13.0-slim AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm install @tailwindcss/oxide-linux-x64-gnu
RUN npm install lightningcss
RUN npm run build

It looks like @tailwindcss/oxide-linux-x64-gnu is missing and that messes other things up down the line.

[LborV]

Same here!

[philipp-spiess]

Hey! Closing this as as a duplicate of #15806. That other issue also has a downstream bug report rom npm that you might find interesting.

[madpilot78]

@philipp-spiess

I don't think it is correct to mark this as duplicate.

#15806 is about the linux arm package not being installed automatically when it should, but being functional once installed.

This issue is about the FreeBSD binary package not being functional even once actually installed, due to the actual binary file not being present in the package:

> ls -lh node_modules/@tailwindcss/oxide-freebsd-x64
total 9.5 KB
-rw-r--r--  1 mad mad  1.0K Feb  5 11:43 LICENSE
-rw-r--r--  1 mad mad  107B Feb  5 11:43 README.md
-rw-r--r--  1 mad mad  518B Feb  5 11:43 package.json

Maybe FreeBSD is not officially supported, but having an npm package claiming support, but missing the actual binary file looks a little strange. Is it planned for the package to be filled up at a later time?

[philipp-spiess]

Oh, I see, sorry for that!

Yep that is indeed not great. It seems we haven't wired up CI to build for freebsd yet. Lightningcss has an example of how this could be done though: https://github.com/parcel-bundler/lightningcss/blob/master/.github/workflows/release.yml#L163 We'll look into it, sorry!

[silenius]

Thanks for looking into this! I hope Github won't be too long to add FreeBSD support in their Runner as more and more projects are switching to Github CI/CD and the lack of support becomes problematic (see also actions/runner#385)..

[philipp-spiess]

Merged a PR to add the FreeBSD builds. If you could help us test that this works as expected, that would be great. You should be able to just use the latest insiders build:

npm i tailwindcss@insiders @tailwidncss/vite@insiders # etc...

[madpilot78]

@philipp-spiess THaks for the quick fix!

I just tested it in a very small vite project I had, it is a very very simple web page I keep around just in case, and I configured it to use vite and tailwind as an experiment.

It works fine, generates correct css.

I noticed the generated CSS is relatively big, it includes all color variables, which, I gather, I need to disable myself via css @theme for colors I'm not using.

It also includes some other values I'm not using (for example what looks as a spinning animation). Is this expected?

[madpilot78]

Replying to myself I notice the problem with unused variables is known and being worked on in #16211

Looking forward to that one landing!