Tailwind Plus CSS Parsing Failure #1722
Description
It's good to know the spotlight template was working about 2 weeks ago.
I can't see changes as I don't see this template in a git repo.
Thanks!
Bug
What component (if applicable): spotlight
- URL for category: Premium Tailwind Plus Template
- Component name: CSS Processing / PostCSS Configuration
Describe the bug
Tailwind Plus premium template fails to build with CSS parsing errors after package updates, preventing development server from starting. The error Module parse failed: Unexpected character '@' occurs when Next.js attempts to process the src/styles/tailwind.css file, indicating that webpack is trying to parse CSS directly without going through PostCSS first.
To Reproduce
Steps to reproduce the behavior:
- Use Tailwind Plus premium template with recent package updates
- Run
npm run devto start development server - Observe CSS parsing failure during compilation
- See error:
Module parse failed: Unexpected character '@' (1:0)in browser and terminal
Expected behavior
The development server should start successfully and process Tailwind CSS v4 syntax properly through PostCSS, as it did weeks ago before the package updates. The template should work "out of the box" as a premium product.
Screenshots
null
Error output:
⨯ ./src/styles/tailwind.css
Module parse failed: Unexpected character '@' (1:0)
> @import 'tailwindcss';
| @import './prism.css' layer(components);
|
Import trace for requested module:
./src/styles/tailwind.css
./src/app/layout.tsx
Browser/Device (if applicable)
- OS: macOS (Darwin 23.6.0)
- Browser: Development server fails to start (affects all browsers)
- Node.js: Current version
- Next.js: 15.4.4
- Tailwind CSS: 4.1.11
Additional context
Environment Details:
- Template: Tailwind Plus (Premium template - purchased)
- @tailwindcss/postcss Version: 4.1.11
- @tailwindcss/typography Version: 0.5.16
Root Cause Analysis:
- PostCSS Not Processing CSS: Next.js isn't processing CSS files through PostCSS at all
- Plugin Installation Verified:
@tailwindcss/[email protected]is correctly installed - Error Consistency: All
@directives fail, not just Tailwind-specific ones - Webpack Direct Processing: Error messages show webpack trying to parse CSS directly
Investigation Attempted:
- ✗ Multiple PostCSS configuration formats (CommonJS/ES Modules)
- ✗ Various CSS syntax approaches (v4 and v3 syntax)
- ✗ Different plugin configurations
- ✗ Installing additional packages (postcss-import)
- ✗ Creating/removing tailwind.config.js files
Current Configuration Files:
// postcss.config.js
module.exports = {
plugins: {
'@tailwindcss/postcss': {},
},
}/* src/styles/tailwind.css (Original) */
@import 'tailwindcss';
@import './prism.css' layer(components);
@plugin '@tailwindcss/typography';
@config '../../typography.ts';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--text-xs: 0.8125rem;
--text-xs--line-height: 1.5rem;
/* ... additional theme variables ... */
}Environment Warning:
⚠ You are using a non-standard "NODE_ENV" value in your environment.
This creates inconsistencies in the project and is strongly advised against.
Timeline:
- Working: Template functioned perfectly weeks ago
- Broken: Current state after recent package updates
- Impact: Critical - Blocks all development work
Potential Causes:
- Next.js 15.4.4 compatibility issues with Tailwind v4
- Breaking changes in PostCSS processing
- Package version conflicts
- Non-standard NODE_ENV environment variable
Files Modified During Investigation:
postcss.config.js(multiple variations)src/styles/tailwind.css(multiple syntax attempts)tailwind.config.js(created and removed)package.json(added postcss-import)