-
Notifications
You must be signed in to change notification settings - Fork 219
v4: Intellisense attempts to load CSS config from wrong file #1100
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
26 tasks
Hey sorry to get back to this so late. I took a look at this and realized the problem is that there are imports after other at rules: @import 'tailwindcss' source('../');
@variant dark (&:where(.dark, .dark *));
@config '../../tailwind.config.js';
@import './shadcn.css';
@import './layout.css';
@theme {
--font-geist-mono: var(--font-geist-mono);
} This isn't valid CSS and it's being thrown out. I'll see if I can surface those errors to the "Tailwind CSS: Show Output" panel at least. If you change your tailwind.css file to the following your project will work: @import 'tailwindcss' source('../');
@import './shadcn.css';
@import './layout.css';
@variant dark (&:where(.dark, .dark *));
@config '../../tailwind.config.js';
@theme {
--font-geist-mono: var(--font-geist-mono);
} |
That makes a lot of sense, thanks! |
thecrypticace
added a commit
that referenced
this issue
Jan 21, 2025
This is a work in progress with a handful of things that need improvements regarding stylesheet loading / editing when in a v4 project. Fixes #1103 Fixes #1100 - [x] Recover from missing stylesheet imports - [ ] Recover from unparsable stylesheet imports (not sure if possible) - [x] Read path aliases from tsconfig.json - [x] Log errors from analyzing CSS files during the resolve imports stage (the cause of #1100) - [x] Watch for tsconfig.json file changes and reload when they change (or maybe only when the list of seen `paths` do) - [x] Consider path aliases when doing project discovery - [x] Consider path aliases when loading the design system - [x] Allow in `@import` - [x] Allow in `@reference` - [x] Allow in `@config` - [x] Allow in `@plugin` - [ ] Consider path aliases when producing diagnostics - [ ] Allow in `@import` - [ ] Allow in `@reference` - [x] Allow in `@config` (nothing to do here) - [x] Allow in `@plugin` (nothing to do here) - [ ] Consider path aliases when generating document links - [ ] Allow in `@import` (no upstream support; non-trivial) - [ ] Allow in `@reference` (no upstream support in `@import`; non-trivial) - [x] Allow in `@config` - [x] Allow in `@plugin` - [ ] Consider path aliases when offering completions - [ ] Allow in `@import` (no upstream support; non-trivial) - [ ] Allow in `@reference` (no upstream support in `@import`; non-trivial) - [x] Allow in `@config` - [x] Allow in `@plugin`
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of VS Code are you using?
v1.95.3
What version of Tailwind CSS IntelliSense are you using?
v0.12.15 & v0.13.59 (pre-release)
What version of Tailwind CSS are you using?
v4.0.0-beta.2
What package manager are you using?
pnpm
What operating system are you using?
Windows
Tailwind config
VS Code settings
https://gist.github.com/kylekz/bc26835bb3aad2815046c8816ac2c17f
Reproduction URL
https://github.com/kylekz/tailwindv4-nextjs/tree/intellisense
Describe your issue
Extension picks up the incorrect entry point for v4 CSS config, which results in intellisense not working
The
@import "tailwindcss"
statement is in styles/tailwind.css, which seems to be recognised after styles/layout.css. In this state, intellisense doesn't work at all.If I go into styles/layout.css and replace the
@apply
usage with normal CSS like is commented out, intellisense then correctly picks up styles/tailwind.css as the correct config and will start working correctly. Using the experimentaltailwindCSS.experimental.configFile
extension option at the project-level also works to force it.The text was updated successfully, but these errors were encountered: