Tailwind CSS autocompletion isn't working

[demeralde]

FAQ

• [X] I have checked the FAQ and it didn't resolve my problem.

Announcement

• [X] I have checked Breaking change announcement.

Minimal reproducible full config

https://github.com/demeralde/nvim-config

My entire config is here. I'm using NvChad as the base for my config.

Description

I'm trying to set up autocompletion for Tailwind CSS. However, it's only auto completing classes which are already in the file (instead of all the other available Tailwind classes).

I'm not sure why it's not working.

Steps to reproduce

1. Clone my config
2. Create a test.tsx file with the following code:

const IndexPage = () => {
  return (
    <main className="">
    </main>
  );
};

export default IndexPage;

3. Test the className prop autocompletes

Expected behavior

It should show a list of all available Tailwind classes, matching against the currently typed class.

e.g text-red- should match any class with "text-red-" inside it

Actual behavior

It's only showing a list of classes for classes which already exist in the file.

Additional context

No response

[faileon]

I am having the same issue after updating my nvim packages with Lazy. It used to work before with the config I am running. Could anyone please point me how to troubleshoot/fix the issue? The LSP is attached to my defined buffers, but no completions are being shown.

[faileon]

I managed to solve the issue, LSP log had the error:

Failed to initialize workspace folder /home/user/projects/foo/bar [Error: Bad file descriptor]

I removed:

    opts.root_dir = lspconfig.util.root_pattern ".git"

From my tailwindlsp configuration and I now get correct autocompletions.