V4: Ignore files with the vite plugin

[lfantone]

What version of Tailwind CSS are you using?

4.0.7

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

I'm using the vite plugin: @tailwindcss/[email protected] with react-route@7.
Here is an example of the vite config as a reference:

import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  optimizeDeps: {
    exclude: ["@flysas-tech/react-components"],
  },
  ssr: {
    noExternal: [
      "@flysas-tech/react-components",
      /^@flysas-tech\/react-components/,
    ],
  },
  plugins: [
    tailwindcss(),
    reactRouter(),
    vanillaExtractPlugin(),
    tsconfigPaths(),
  ],
});

What version of Node.js are you using?

v20.18.3

What browser are you using?

n/a

What operating system are you using?

OS X

Describe your issue

When building the application with [email protected] and combining tailwindcss v4.0 with vanilla-extract, the process fails with:

10:28:14 AM [vite] Internal server error: Unexpected semicolon
  Plugin: @tailwindcss/vite:generate:serve
  File: /home/react-components/dist/esm/src/atoms/file-input/file-input.css.js.vanilla.css
      at me (file:///home/react-components-test/node_modules/tailwindcss/dist/chunk-CH45MXZF.mjs:10:1729)
      at _o (file:///home/react-components-test/node_modules/tailwindcss/dist/lib.mjs:24:1531)
      at rt (file:///home/react-components-test/node_modules/@tailwindcss/node/dist/index.mjs:10:3328)
      at M.generate (file:///home/react-components-test/node_modules/@tailwindcss/vite/dist/index.mjs:1:5442)
      at TransformPluginContext.transform (file:///home/react-components-test/node_modules/@tailwindcss/vite/dist/index.mjs:1:3439)
      at PluginContainer.transform (file:///home/react-components-test/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49099:19)
      at loadAndTransform (file:///home/react-components-test/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:51931:27)
      at instantiateModule (file:///home/react-components-test/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52876:44)

My guess is that tailwind plugin reads vanilla.css files as valid css, while they are actually javascript files used by the vanilla-extract plugin.
Unsure if this is because there is something wrong with my tailwindcss setup but in v3 we didn't have this issue.

Is it possible to tell the tailwindcss vite plugin to ignore files?
I have try to manually ignore the vanilla.css files during the @tailwindcss/vite:generate:serve step and everything works as expect

[Nikola-Milovic]

Same issue with polaris from shopify import "@shopify/polaris/build/esm/styles.css" causes this error.

How do you manually ignore the vanilla.css file?

[lfantone]

I have to patch the transform function of @tailwindcss/vite:generate:serve, adding:

if (id.includes("/PATH_TO_IGNORE/")) return;