"Cannot find module 'tailwindcss/package.json'" when using django-tailwind module

[jbfriedrich]

I am currently getting more familiar with Django and I am trying to use the django-tailwind module. After following their instructions, I end up with the following file structure inside my project:

.
├── README.md
├── db.sqlite3
├── filestructure.txt
├── myproject
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── posts
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── posts
│   │       └── list.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── requirements.txt
└── theme
    ├── __init__.py
    ├── apps.py
    ├── static
    │   └── css
    │       ├── styles.css
    │       └── styles.css.map
    ├── static_src
    │   ├── node_modules
    │   │   ├── @babel
    │   │   ├── @fullhuman
    │   │   ├── @nodelib
    │   │   ├── @types
    │   │   ├── abbrev
    │   │   ├── acorn
    │   │   ├── acorn-node
    │   │   ├── acorn-walk
    │   │   ├── ajv
    │   │   ├── amdefine
    │   │   ├── ansi-regex
    │   │   ├── ansi-styles
    │   │   ├── anymatch
    │   │   ├── aproba
    │   │   ├── are-we-there-yet
    │   │   ├── array-find-index
    │   │   ├── array-union
    │   │   ├── asn1
    │   │   ├── assert-plus
    │   │   ├── async-foreach
    │   │   ├── asynckit
    │   │   ├── at-least-node
    │   │   ├── autoprefixer
    │   │   ├── aws-sign2
    │   │   ├── aws4
    │   │   ├── balanced-match
    │   │   ├── bcrypt-pbkdf
    │   │   ├── binary-extensions
    │   │   ├── brace-expansion
    │   │   ├── braces
    │   │   ├── browserslist
    │   │   ├── bytes
    │   │   ├── callsites
    │   │   ├── camelcase
    │   │   ├── camelcase-css
    │   │   ├── camelcase-keys
    │   │   ├── caniuse-lite
    │   │   ├── caseless
    │   │   ├── chalk
    │   │   ├── chokidar
    │   │   ├── chownr
    │   │   ├── clean-css
    │   │   ├── clean-css-cli
    │   │   ├── cliui
    │   │   ├── code-point-at
    │   │   ├── color
    │   │   ├── color-convert
    │   │   ├── color-name
    │   │   ├── color-string
    │   │   ├── colorette
    │   │   ├── combined-stream
    │   │   ├── commander
    │   │   ├── concat-map
    │   │   ├── console-control-strings
    │   │   ├── core-util-is
    │   │   ├── cosmiconfig
    │   │   ├── cross-spawn
    │   │   ├── css-unit-converter
    │   │   ├── cssesc
    │   │   ├── currently-unhandled
    │   │   ├── dashdash
    │   │   ├── decamelize
    │   │   ├── defined
    │   │   ├── delayed-stream
    │   │   ├── delegates
    │   │   ├── dependency-graph
    │   │   ├── detective
    │   │   ├── didyoumean
    │   │   ├── dir-glob
    │   │   ├── ecc-jsbn
    │   │   ├── electron-to-chromium
    │   │   ├── emoji-regex
    │   │   ├── env-paths
    │   │   ├── error-ex
    │   │   ├── escalade
    │   │   ├── escape-string-regexp
    │   │   ├── exec-sh
    │   │   ├── extend
    │   │   ├── extsprintf
    │   │   ├── fast-deep-equal
    │   │   ├── fast-glob
    │   │   ├── fast-json-stable-stringify
    │   │   ├── fastq
    │   │   ├── fill-range
    │   │   ├── find-up
    │   │   ├── forever-agent
    │   │   ├── form-data
    │   │   ├── fraction.js
    │   │   ├── fs-extra
    │   │   ├── fs-minipass
    │   │   ├── fs.realpath
    │   │   ├── function-bind
    │   │   ├── gauge
    │   │   ├── gaze
    │   │   ├── get-caller-file
    │   │   ├── get-stdin
    │   │   ├── getpass
    │   │   ├── glob
    │   │   ├── glob-parent
    │   │   ├── globby
    │   │   ├── globule
    │   │   ├── graceful-fs
    │   │   ├── har-schema
    │   │   ├── har-validator
    │   │   ├── has
    │   │   ├── has-ansi
    │   │   ├── has-flag
    │   │   ├── has-unicode
    │   │   ├── hosted-git-info
    │   │   ├── html-tags
    │   │   ├── http-signature
    │   │   ├── ignore
    │   │   ├── import-cwd
    │   │   ├── import-fresh
    │   │   ├── import-from
    │   │   ├── indent-string
    │   │   ├── indexes-of
    │   │   ├── inflight
    │   │   ├── inherits
    │   │   ├── is-arrayish
    │   │   ├── is-binary-path
    │   │   ├── is-core-module
    │   │   ├── is-extglob
    │   │   ├── is-finite
    │   │   ├── is-fullwidth-code-point
    │   │   ├── is-glob
    │   │   ├── is-number
    │   │   ├── is-typedarray
    │   │   ├── is-utf8
    │   │   ├── isarray
    │   │   ├── isexe
    │   │   ├── isstream
    │   │   ├── js-base64
    │   │   ├── js-tokens
    │   │   ├── jsbn
    │   │   ├── json-parse-even-better-errors
    │   │   ├── json-schema
    │   │   ├── json-schema-traverse
    │   │   ├── json-stringify-safe
    │   │   ├── jsonfile
    │   │   ├── jsprim
    │   │   ├── lines-and-columns
    │   │   ├── load-json-file
    │   │   ├── locate-path
    │   │   ├── lodash
    │   │   ├── lodash.difference
    │   │   ├── lodash.forown
    │   │   ├── lodash.get
    │   │   ├── lodash.groupby
    │   │   ├── lodash.sortby
    │   │   ├── lodash.toarray
    │   │   ├── loud-rejection
    │   │   ├── lru-cache
    │   │   ├── map-obj
    │   │   ├── meow
    │   │   ├── merge
    │   │   ├── merge2
    │   │   ├── micromatch
    │   │   ├── mime-db
    │   │   ├── mime-types
    │   │   ├── minimatch
    │   │   ├── minimist
    │   │   ├── minipass
    │   │   ├── minizlib
    │   │   ├── mkdirp
    │   │   ├── modern-normalize
    │   │   ├── nan
    │   │   ├── nanoid
    │   │   ├── node-emoji
    │   │   ├── node-gyp
    │   │   ├── node-releases
    │   │   ├── node-sass
    │   │   ├── nopt
    │   │   ├── normalize-package-data
    │   │   ├── normalize-path
    │   │   ├── normalize-range
    │   │   ├── npmlog
    │   │   ├── number-is-nan
    │   │   ├── oauth-sign
    │   │   ├── object-assign
    │   │   ├── object-hash
    │   │   ├── once
    │   │   ├── p-limit
    │   │   ├── p-locate
    │   │   ├── p-try
    │   │   ├── parent-module
    │   │   ├── parse-json
    │   │   ├── path-exists
    │   │   ├── path-is-absolute
    │   │   ├── path-key
    │   │   ├── path-parse
    │   │   ├── path-type
    │   │   ├── performance-now
    │   │   ├── picomatch
    │   │   ├── pify
    │   │   ├── pinkie
    │   │   ├── pinkie-promise
    │   │   ├── postcss
    │   │   ├── postcss-cli
    │   │   ├── postcss-functions
    │   │   ├── postcss-js
    │   │   ├── postcss-load-config
    │   │   ├── postcss-nested
    │   │   ├── postcss-reporter
    │   │   ├── postcss-scss
    │   │   ├── postcss-selector-parser
    │   │   ├── postcss-value-parser
    │   │   ├── pretty-hrtime
    │   │   ├── process-nextick-args
    │   │   ├── psl
    │   │   ├── punycode
    │   │   ├── purgecss
    │   │   ├── qs
    │   │   ├── read-cache
    │   │   ├── read-pkg
    │   │   ├── read-pkg-up
    │   │   ├── readable-stream
    │   │   ├── readdirp
    │   │   ├── redent
    │   │   ├── reduce-css-calc
    │   │   ├── repeating
    │   │   ├── request
    │   │   ├── require-directory
    │   │   ├── require-main-filename
    │   │   ├── resolve
    │   │   ├── resolve-from
    │   │   ├── reusify
    │   │   ├── rimraf
    │   │   ├── run-parallel
    │   │   ├── safe-buffer
    │   │   ├── safer-buffer
    │   │   ├── sass-graph
    │   │   ├── scss-tokenizer
    │   │   ├── semver
    │   │   ├── set-blocking
    │   │   ├── shebang-command
    │   │   ├── shebang-regex
    │   │   ├── signal-exit
    │   │   ├── simple-swizzle
    │   │   ├── slash
    │   │   ├── source-map
    │   │   ├── spdx-correct
    │   │   ├── spdx-exceptions
    │   │   ├── spdx-expression-parse
    │   │   ├── spdx-license-ids
    │   │   ├── sshpk
    │   │   ├── stdout-stream
    │   │   ├── string-width
    │   │   ├── string_decoder
    │   │   ├── strip-ansi
    │   │   ├── strip-bom
    │   │   ├── strip-indent
    │   │   ├── supports-color
    │   │   ├── tailwindcss
    │   │   ├── tar
    │   │   ├── to-regex-range
    │   │   ├── tough-cookie
    │   │   ├── trim-newlines
    │   │   ├── true-case-path
    │   │   ├── tunnel-agent
    │   │   ├── tweetnacl
    │   │   ├── uniq
    │   │   ├── universalify
    │   │   ├── uri-js
    │   │   ├── util-deprecate
    │   │   ├── uuid
    │   │   ├── validate-npm-package-license
    │   │   ├── verror
    │   │   ├── watch
    │   │   ├── which
    │   │   ├── which-module
    │   │   ├── wide-align
    │   │   ├── wrap-ansi
    │   │   ├── wrappy
    │   │   ├── xtend
    │   │   ├── y18n
    │   │   ├── yallist
    │   │   ├── yaml
    │   │   ├── yargs
    │   │   └── yargs-parser
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── postcss.config.js
    │   ├── src
    │   │   └── styles.scss
    │   └── tailwind.config.js
    └── templates
        └── base.html

The extension does not seem to work properly with this file and folder structure. It can find the tailwind.config.js but expected the package.json inside of the tailwindcss directory. The Django module puts it into a different location though. The 'tailwind-intellisense' output in VS Code shows the following:

Found Tailwind config file: /workspaces/blog/theme/static_src/tailwind.config.js
Failed to initialise: Error: Cannot find module 'tailwindcss/package.json'
Require stack:
- /workspaces/blog/theme/static_src/noop.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at a (/root/.vscode-server/extensions/bradlc.vscode-tailwindcss-0.5.6/dist/server/index.js:13:38328)
    at s (/root/.vscode-server/extensions/bradlc.vscode-tailwindcss-0.5.6/dist/server/index.js:13:38437)
    at e.exports (/root/.vscode-server/extensions/bradlc.vscode-tailwindcss-0.5.6/dist/server/index.js:13:38459)
    at resolve (/root/.vscode-server/extensions/bradlc.vscode-tailwindcss-0.5.6/dist/server/index.js:13:156345)
    at /root/.vscode-server/extensions/bradlc.vscode-tailwindcss-0.5.6/dist/server/index.js:13:160994
    at /root/.vscode-server/extensions/bradlc.vscode-tailwindcss-0.5.6/dist/server/index.js:13:156287
    at L (/root/.vscode-server/extensions/bradlc.vscode-tailwindcss-0.5.6/dist/server/index.js:13:156353)
    at L (/root/.vscode-server/extensions/bradlc.vscode-tailwindcss-0.5.6/dist/server/index.js:13:156572)
    at /root/.vscode-server/extensions/bradlc.vscode-tailwindcss-0.5.6/dist/server/index.js:13:160936 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/workspaces/blog/theme/static_src/noop.js' ]
}

Is there a way I can configure where to find the tailwind config and package.json?

[bradlc]

Hey @jbfriedrich. Are you able to share a repository with this file structure so I can take a look? It looks fine though 🤔

Here's a few things you can check:

• Ensure that you have reloaded the VS Code window after installing tailwindcss
• Ensure that the /workspaces/blog/theme/static_src/node_modules/tailwindcss/package.json file exists

[MINORITYmaN]

i have the same message
using vue + pnpm (Files inside node_modules are linked from a single content-addressable storage).
i develop on a user account without admin perms, but pnpm i run from a admin elevated cmd.
so i think it could be permission related, for example, node -v takes forever as non elevated user

edit: everthing else works fine so far (like serve, build, lint ect).

update: when i switch the project fully to admin for esting purpose, then everthing is fine.

[jbfriedrich]

Hey @jbfriedrich. Are you able to share a repository with this file structure so I can take a look? It looks fine though 🤔

Here's a few things you can check:

• Ensure that you have reloaded the VS Code window after installing tailwindcss
• Ensure that the /workspaces/blog/theme/static_src/node_modules/tailwindcss/package.json file exists

I reloaded VS Code, but that did not have the desired effect. It seems that the "django-tailwind" module, when it installs tailwind and all the required dependencies via npm, is not creating a package.json in that directory. The only file that exists /workspaces/blog/theme/static_src/. I will work on cleaning up my repo a bit to get you access.

[bradlc]

I set up a new project with django-tailwind and everything works fine. What files and folders are you seeing in the /workspaces/blog/theme/static_src/node_modules/tailwindcss folder? As @MINORITYmaN said this may be a permissions issue.

[bradlc]

Closing this for inactivity but please open a new issue if you're still having problems 👍

[alisahebi]

I have same issue(whithout any framework) . I can't see my package.JSON when i want run tailwind.css

[MARCORYKER]

hi guys here we see that the json files are not automatically appearing here
so we need to manually over ride to work with the tailwind css
ITS BASICALLY INTEGRATES THE TAILWIND CLI AND POSTCCS
To work with the tailwind css we need the following six Files:

index.html
styles.css
package-lock.json
package.json
tailwind.config.js
postcss.config.js
The steps to be followed in the sequence:
1)open the folder where you want to work
2)create index.html and styles.css
3)link them using the link tag
4)open the terminal in the vscode and type the following command mentioned below
5)npm install -D tailwindcss postcss autoprefixer -vite
6)Basically,the above step creates the two .json files
7)But if the two .json files does not appear in the vs code editor then follow these steps mentioned below:
for creating the two .json files
1)for the package.json use the command-->npm init -y
2)and the package.json is created with no Devdepencies/all Dev dependencies and with default script/no script
3)After that,make sure to this second command for the generation of the package-lock.json file only after the using of the first command or else you cant create the package-lock.json file
8)next use the command below to get the two configuration files
--> npx tailwindcss init -p
1)tailwind.config.js
2)postcss.config.js
9)for getting the dev dependencies in the package.json run the following command given below
-->npm install -D tailwindcss postcss-cli autoprefixer
10)now the devDependencies are installed
11)Now you need to add the script the package.json file given below
"scripts": {
"start": "vite"
},
12)now add the given tailwind directives to your css file mentioned below:
@tailwind base;
@tailwind components;
@tailwind utilities;

13)And in the terminal run the website using the followin and also make sure to disable/off the live server while using the below command
-->npm run start