egoist / egoist/tsup

@import "tailwindcss" not processed in build output when using tsup with Tailwind CSS v4

Open
#1,337 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.