Tailwind intellisense not working with Nativewind and React Native classNames

[oliverpatrick]

VSCode 1.87.0

What version of Tailwind CSS IntelliSense - Pre-release (0.11.40)

TailwindCSS as of date issue raised.

Npm Windows

**Tailwind config**
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter"],
      },
      colors,
    },
  },
  plugins: [],
};

VS Code settings

{
  "workbench.iconTheme": "material-icon-theme",
  "editor.tabSize": 2,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.editorAssociations": {
    "*.ipynb": "jupyter-notebook"
  },
  "notebook.cellToolbarLocation": {
    "default": "right",
    "jupyter-notebook": "left"
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "editor.formatOnSave": true,
  "terminal.integrated.enableMultiLinePasteWarning": false,
  "explorer.confirmDragAndDrop": false,
  "settingsSync.ignoredSettings": ["-omnisharp.monoPath"],
  "git.autofetch": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "kotlin.languageServer.enabled": false,
  "kotlin.debugAdapter.enabled": false,
  "[python]": {
    "editor.formatOnType": true
  },
  "settingsSync.ignoredExtensions": [
    "mark-wiemer.vscode-autohotkey-plus-plus",
    "ms-dotnettools.csharp",
    "kreativ-software.csharpextensions",
    "k--kato.docomment",
    "clinyong.vscode-css-modules",
    "andrewleedham.vscode-css-modules",
    "vscjava.vscode-java-debug",
    "unity.unity-debug",
    "icrawl.discord-vscode",
    "vscjava.vscode-java-pack",
    "ms-python.isort"
  ],
  "editor.guides.bracketPairs": true,
  "jsdoc-generator.author": "Oliver Holroyd",
  "jsdoc-generator.descriptionForConstructors": "Creates an instance of {Object}",
  "jsdoc-generator.descriptionPlaceholder": "TODO - Documentation",
  "explorer.confirmDelete": false,
  "http.proxyAuthorization": null
}

Reproduction URL

const ThreeTab: React.FC = () => {
  return (
    <View className="flex items-center justify-center">
      <Text className="text-2xl font-bold">Tab Three</Text>
      <View className="my-6 h-1 bg-[#eee] dark:bg-white">
        {/* <EditScreenInfo path="app/(tabs)/three.tsx" /> */}
      </View>
    </View>
  );
};

Describe your issue

Cant get intellisense on View or Text... Don't know if this is due to the nature of React-Native or if it genuinely is a bug.

If this is not a bug and more a feature that hasn't been implemented, can this be moved to a feature request? Thanks

[thecrypticace]

Hey! So, I just tested intellisense using NativeWind and it appears to work fine:

This might be related to your config or potentially something else in your setup. You can see output from the extension by using the "Tailwind CSS: Show Output" command in your command palette. If you don't see it then that might mean the extension isn't detecting Tailwind. In which case I'd suggest updating to the pre-release and checking the output there (it's always available in the pre-release build).

I'm going to close this but if you're still encountering this issue please open a new issue and provide a reproduction repository on GitHub as it would be very helpful in figuring out what might be going wrong.

Thanks! ✨

[hughgardiner]

Figured out my issue from the Tailwind CSS Output. I had moved my color definition to a separate Typescript file that I was referencing with a Typescript alias path instead of an absolute path: Updated

import { colors } from "~/colors";

to

import { colors } from "./src/colors";

fixed my particular issue