search

tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.75k stars 183 forks source link

[config/tailwind.config.js] Building... [Error] Tailwind CSS: n is not a function TypeError: n is not a function #900

Closed jbk2 closed 5 months ago

jbk2 commented 6 months ago

What version of VS Code are you using? - v1.85.1

What version of Tailwind CSS IntelliSense are you using? - v0.10.5

What version of Tailwind CSS are you using? - v2.2.0

What package manager are you using? - npm

What operating system are you using? - macOS - 14.2.1

Tailwind config

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

VS Code settings

{
    "workbench.colorTheme": "Default Dark+",
    "editor.tabSize": 2,
    "git.autofetch": true,
    "workbench.startupEditor": "none",
    "diffEditor.ignoreTrimWhitespace": false,
    "github.copilot.enable": {
        "*": true,
        "plaintext": false,
        "markdown": true,
        "scminput": false
    },
    "emmet.includeLanguages": {
        "erb": "html"
    },
    "files.associations": {
      "*.html.erb": "html"
    },
    "rubyLsp.rubyVersionManager": "rvm",
    "[html.erb]": {},
    "window.zoomLevel": 1,
    "tailwindCSS.includeLanguages": {
      "javascript": "javascript",
      "html.erb": "html"
    },
    "tailwindCSS.emmetCompletions": true,
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "tailwindCSS.experimental.classRegex": [
      "\\bclass:\\s*'([^']*)'",
      "\\bclass:\\s*\"([^\"]*)\""
    ]
}

Reproduction URL

Sorry, don't know how to link you to my env with the not working intellisense. See issue report below.

Describe your issue

Intellisense Tailwindcss class autopredict/autocomplete feature not working in any file format (html, html.erb, css) despite many settings.json changes. Error message below reported in VScode output:

[tailwind.config.js] Initializing...
[tailwind.config.js] Loaded Tailwind CSS config file: /Users/user_name/Documents/Code/Learning/odin_project/rails/private-events/tailwind.config.js
[tailwind.config.js] Loaded postcss v8.4.14: /Users/user_name/Documents/Code/Learning/node_modules/postcss
[tailwind.config.js] Loaded tailwindcss v3.1.6: /Users/user_name/Documents/Code/Learning/node_modules/tailwindcss
[tailwind.config.js] Building...
[Error - 21:04:49] Tailwind CSS: n is not a function
TypeError: n is not a function
    at XW.exports.theme.containers.xs (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:173:1488)
    at registerPlugins (/Users/user_name/Documents/Code/Learning/node_modules/tailwindcss/lib/lib/setupContextUtils.js:660:61)
    at createContext (/Users/user_name/Documents/Code/Learning/node_modules/tailwindcss/lib/lib/setupContextUtils.js:860:5)
    at Object.module (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:6591)
    at b (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:10881)
    at S (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:4537)
    at P (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:9211)
    at Object.I [as tryInit] (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:4422)
    at KR._init (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2952:13103)
    at async KR.init (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2952:7846)
----------
RESTARTING
----------
[Global] Creating projects: [{"folder":"/Users/user_name/Documents/Code/Learning/odin_project/rails/private-events","configPath":"/Users/user_name/Documents/Code/Learning/odin_project/rails/private-events/config/tailwind.config.js","isUserConfigured":false,"documentSelector":[{"pattern":"/Users/user_name/Documents/Code/Learning/odin_project/rails/private-events/config/tailwind.config.js","priority":0},{"pattern":"/Users/user_name/Documents/Code/Learning/odin_project/rails/private-events/config/**","priority":3},{"pattern":"/Users/user_name/Documents/Code/Learning/odin_project/rails/private-events/**","priority":4}]}]
[Global] Adding watch patterns: /Users/user_name/Documents/Code/Learning/odin_project/rails/private-events/config/tailwind.config.js, /Users/user_name/Documents/Code/Learning/odin_project/rails/private-events/config, /Users/user_name/Documents/Code/Learning/odin_project/rails/private-events
[config/tailwind.config.js] Initializing...
[config/tailwind.config.js] Loaded Tailwind CSS config file: /Users/user_name/Documents/Code/Learning/odin_project/rails/private-events/config/tailwind.config.js
[config/tailwind.config.js] Loaded postcss v8.4.14: /Users/user_name/Documents/Code/Learning/node_modules/postcss
[config/tailwind.config.js] Loaded tailwindcss v3.1.6: /Users/user_name/Documents/Code/Learning/node_modules/tailwindcss
[config/tailwind.config.js] Building...
[Error - 21:05:23] Tailwind CSS: n is not a function
TypeError: n is not a function
    at XW.exports.theme.containers.xs (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:173:1488)
    at registerPlugins (/Users/user_name/Documents/Code/Learning/node_modules/tailwindcss/lib/lib/setupContextUtils.js:660:61)
    at createContext (/Users/user_name/Documents/Code/Learning/node_modules/tailwindcss/lib/lib/setupContextUtils.js:860:5)
    at Object.module (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:6591)
    at b (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:10881)
    at S (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:4537)
    at P (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:9211)
    at Object.I [as tryInit] (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2950:4422)
    at KR._init (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2952:13103)
    at async KR.init (/Users/user_name/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:2952:7846)
thecrypticace commented 6 months ago

Hey could you provide a clonable repo I can reproduce this in?

You say you're using Tailwind CSS v2.2.0 but Intellisense seems to think it's Tailwind CSS v3.1.6 so having a repo would be the best way to troubleshoot what's happening.

thecrypticace commented 5 months ago

Ah, I figured it out!

  1. You're using Tailwind CSS v3.1.6
  2. You've added the @tailwindcss/container-queries plugin to your config
  3. And you don't have it installed (so it falls back to a built-in one in intellisense)

Our plugin, @tailwindcss/container-queries, requires at least Tailwind CSS v3.2 so you'll want to upgrade:

npm install tailwindcss@latest
jbk2 commented 5 months ago

Ahh, you’re my hero Jordan, that’s sorted the problem exactly as you though it would. Thank you very much indeed 👍🏻.

From: Jordan Pittman @.> Reply to: tailwindlabs/tailwindcss-intellisense @.> Date: Tuesday, 16 January 2024 at 22:53 To: tailwindlabs/tailwindcss-intellisense @.> Cc: "J.B.Kemp - Bibble" @.>, Author @.***> Subject: Re: [tailwindlabs/tailwindcss-intellisense] [config/tailwind.config.js] Building... [Error] Tailwind CSS: n is not a function TypeError: n is not a function (Issue #900)

Ah, I figured it out!

  1. You're using Tailwind CSS v3.1.6
  2. You've added the @tailwindcss/container-queries plugin to your config
  3. And you don't have it installed (so it falls back to a built-in one in intellisense)

Our plugin, @tailwindcss/container-queries, requires at least Tailwind CSS v3.2 so you'll want to upgrade:

npm install @.***

— Reply to this email directly, view it on GitHubhttps://github.com/tailwindlabs/tailwindcss-intellisense/issues/900#issuecomment-1894574806, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABZUZJB46TXBXFQDBZCUGNTYO3ZFVAVCNFSM6AAAAABBSAXIMCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJUGU3TIOBQGY. You are receiving this because you authored the thread.Message ID: @.***>