When I start typing p inside a React component, it suggests some functions, but I want Tailwind CSS classes to appear first in the autocomplete suggestions instead. Is there a way to configure my editor or settings so that Tailwind classes take priority?

Please refer the image if my explanation is not clear enough.

When I start typing p inside a React component, it suggests some functions, but I want Tailwind CSS classes to appear first in the autocomplete suggestions instead. Is there a way to configure my editor or settings so that Tailwind classes take priority?

Please refer the image if my explanation is not clear enough.

• reactjs
• visual-studio-code
• tailwind-css
• vscode-extensions
• tailwind-css-intellisense

• I don't know what you mean by "functions", but in the photo, we can see variants related to Tailwind CSS, such as print: variant. – rozsazoltan Commented 7 hours ago
• Although I understand your frustration with the order, I never thought it would make much of a difference to see the classes starting with p at the front. After all, I wouldn't choose p-{number} for the hint, or pt-{number}, etc., the hint would be very weak here. – rozsazoltan Commented 7 hours ago
• You can mention it in the Intellisense repository as a development suggestion, that the order should be customizable and that the priority between the variant and the class could be listed in an array. – rozsazoltan Commented 7 hours ago

1 Answer 1

No. There's no way to do that. However, if we look deeper into the issue, the hint itself doesn't offer much help, as it lists many similar classes, e.g., p for example: p-1, p-2, p-3... p-72. Typing them out is easier than selecting them from the hint. The hint, in my opinion, is primarily meant to reinforce that you're using a valid class name or variant while typing.