@import "tailwindcss" not processed in build output when using tsup with Tailwind CSS v4
- Dominant language
- TypeScript
- Stars
- 11.3k
- Forks
- 275
- PR merge metrics
- No merged PRs in 30d
Description
Hi! I recently needed to use tsup to build a test application for a UI kit that uses Tailwind CSS v4. However, when I ran the build command with the configuration below, the `@import "tailwindcss"` statement in my index.css file was not processed. It remained as-is in the final build output, which caused none of my component styles to be applied.
Here’s the tsup configuration I’m using:
```ts
import { defineConfig } from 'tsup';
export default defineConfig({
entry: ['src/index.ts'],
format: ['cjs', 'esm'],
outDir: 'dist',
tsconfig: 'tsconfig.build.json',
minify: true,
sourcemap: false,
clean: true,
dts: true,
});
```
Project stack
- Build tool: tsup
- Framework: Vite + React
- Language: TypeScript
- CSS: Tailwind CSS v4
Let me know if you'd like me to provide a minimal reproduction repo. Thanks in advance!
Contributor guide
Research direction
Reproduce the build using the shown tsup configuration, src/index.ts, and the index.css file containing @import "tailwindcss". Check the final dist output first; done means the import is processed during the build and the component styles are applied rather than leaving the statement unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript, vite
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100