jaredh159 / tailwind-react-native-classnames

simple, expressive API for tailwindcss + react-native
2.08k stars 84 forks source link

No VS Code intellisense #321

Open stesvis opened 1 month ago

stesvis commented 1 month ago

I followed all the instructions but VS Code is still not providing any intellisense when I type the class names:

// Example: trying to autocomplete "bg-red-500"
<View style={tw`bg-red-`}>
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "style",
    ".*Styles.*",
    ".*Class.*"
  ],
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"],
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "tailwindCSS.emmetCompletions": true,

I am using "twrnc": "^4.5.1" in VS Code 1.94.0

Version: 1.94.0 (system setup)
Commit: d78a74bcdfad14d5d3b1b782f87255d802b57511
Date: 2024-10-02T13:08:12.626Z
Electron: 30.5.1
ElectronBuildId: 10262041
Chromium: 124.0.6367.243
Node.js: 20.16.0
V8: 12.4.254.20-electron.0
OS: Windows_NT x64 10.0.22631

Am I missing something obvious?

mcoevert commented 1 month ago

@stesvis had the same, but fixed it by creating the tailwind.config.js file with base content:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [],
    theme: {
      extend: {},
    },
    plugins: [],
  };

As mentioned here: https://github.com/jaredh159/tailwind-react-native-classnames/discussions/124#discussioncomment-8841211

stesvis commented 1 month ago

@stesvis had the same, but fixed it by creating the tailwind.config.js file with base content:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [],
    theme: {
      extend: {},
    },
    plugins: [],
  };

As mentioned here: #124 (reply in thread)

Yep I do have that, but still no intellisense:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: colors.primary,
        primaryBorder: colors.primaryBorder,
        secondary: colors.secondary,
        secondaryBorder: colors.secondaryBorder,
        tertiary: colors.tertiary,
        tertiaryBorder: colors.tertiaryBorder,
        quaternary: colors.quaternary,
        quaternaryBorder: colors.quaternaryBorder,
        success: colors.success,
        successBorder: colors.successBorder,
        warning: colors.warning,
        warningBorder: colors.warningBorder,
        error: colors.error,
        errorBorder: colors.errorBorder,
        link: colors.link,
        linkBorder: colors.linkBorder,
        info: colors.info,
        infoBorder: colors.infoBorder,
      },
    },
  },
  plugins: [],
};

I also noticed that I don't get the expo-router routes intellisense :(

ollyde commented 2 weeks ago

I'm also facing the same issue, followed the instructions and multiple solutions. Did you ever get this working? @stesvis