firecrawl / firecrawl/open-lovable

Tailwind CSS v4 Compatibility Issue on Windows while setup

Open
#43 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
28.4k
Forks
5.4k
PR merge metrics
No merged PRs in 30d

Description

When running npm run dev on Windows, the application fails to start due to a missing native module for lightningcss, which is a dependency of Tailwind CSS v4.

## Error message:
Build Error
Error evaluating Node.js code
./app/globals.css
Error evaluating Node.js code
Error: Cannot find module '../lightningcss.win32-x64-msvc.node'
Require stack:
- C:\Users\Rakshit\OneDrive\Desktop\open-lovable\node_modules\lightningcss\node\index.js
- C:\Users\Rakshit\OneDrive\Desktop\open-lovable\node_modules\@tailwindcss\node\dist\index.js
- C:\Users\Rakshit\OneDrive\Desktop\open-lovable\node_modules\@tailwindcss\postcss\dist\index.js
- C:\Users\Rakshit\OneDrive\Desktop\open-lovable\.next\build\chunks\[turbopack]_runtime.js
- C:\Users\Rakshit\OneDrive\Desktop\open-lovable\.next\postcss.js

## Environment
- OS: Windows
- Node.js: Latest version
- Next.js: 15.4.3 with Turbopack
- Tailwind CSS: v4.1.11 (problematic version)

## Solution
### Option 1: Downgrade to Tailwind CSS v3 (Recommended)
-> Update the readme.md setup file and tell for downloading Tailwind CSS v3.
- npm uninstall tailwindcss @tailwindcss/postcss
- npm install tailwindcss@3.4.1 postcss autoprefixer --save-dev
- Update PostCSS config in postcss.config.mjs :
const config = {
plugins: {
tailwindcss: {}, // Changed from '@tailwindcss/postcss'
autoprefixer: {},
},
};

export default config;
- Update CSS directives in app/globals.css :
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Replace the previous @import "tailwindcss"; */

### Option 2: Fix Tailwind CSS v4 Installation (Not Tested)
If you need to use Tailwind CSS v4 specifically, you might try:

1. Clearing npm cache: npm cache clean --force
2. Reinstalling dependencies: npm install
3. Manually installing lightningcss: npm install lightningcss

## Additional Notes
- The project has multiple lockfiles (package-lock.json and pnpm-lock.yaml), which might cause dependency resolution issues. Consider removing one of them.
- Tailwind CSS v4 is still in early stages and might have compatibility issues on some platforms.
- Using Tailwind CSS v3.4.1 provides a stable experience across all platforms.

### I can work on this if consider option 1 then i'll modifiy setup in README.md and if u consider option 2 i can also work on this.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.