我已经成功地使用tailwindcss-rails
gem(通过rails new testapp -css tailwind
)让 Tailwind CSS 在 Rails 7 中工作。
一些交互式项目(如下拉菜单)不起作用,因为它需要 JS。所以我跑了bin/importmap pin tailwindcss
,它安装了一堆插件importmap.rb
:
pin "tailwindcss", to: "https://ga.jspm.io/npm:tailwindcss@3.0.7/lib/index.js"
pin "@nodelib/fs.scandir", to: "https://ga.jspm.io/npm:@nodelib/fs.scandir@2.1.5/out/index.js"
pin "@nodelib/fs.stat", to: "https://ga.jspm.io/npm:@nodelib/fs.stat@2.0.5/out/index.js"
pin "@nodelib/fs.walk", to: "https://ga.jspm.io/npm:@nodelib/fs.walk@1.2.8/out/index.js"
pin "acorn", to: "https://ga.jspm.io/npm:acorn@7.4.1/dist/acorn.js"
pin "acorn-node", to: "https://ga.jspm.io/npm:acorn-node@1.8.2/index.js"
pin "acorn-node/walk", to: "https://ga.jspm.io/npm:acorn-node@1.8.2/walk.js"
pin "acorn-walk", to: "https://ga.jspm.io/npm:acorn-walk@7.2.0/dist/walk.js"
pin "ansi-styles", to: "https://ga.jspm.io/npm:ansi-styles@4.3.0/index.js"
pin "anymatch", to: "https://ga.jspm.io/npm:anymatch@3.1.2/index.js"
pin "assert", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/assert.js"
pin "balanced-match", to: "https://ga.jspm.io/npm:balanced-match@1.0.2/index.js"
pin "binary-extensions", to: "https://ga.jspm.io/npm:binary-extensions@2.2.0/index.js"
pin "brace-expansion", to: "https://ga.jspm.io/npm:brace-expansion@1.1.11/index.js"
pin "braces", to: "https://ga.jspm.io/npm:braces@3.0.2/index.js"
pin "buffer", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/buffer.js"
pin "camelcase-css", to: "https://ga.jspm.io/npm:camelcase-css@2.0.1/index-es5.js"
pin "chalk", to: "https://ga.jspm.io/npm:chalk@4.1.2/source/index.js"
pin "chokidar", to: "https://ga.jspm.io/npm:chokidar@3.5.2/index.js"
pin "color-convert", to: "https://ga.jspm.io/npm:color-convert@2.0.1/index.js"
pin "color-name", to: "https://ga.jspm.io/npm:color-name@1.1.4/index.js"
pin "concat-map", to: "https://ga.jspm.io/npm:concat-map@0.0.1/index.js"
pin "crypto", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/crypto.js"
pin "cssesc", to: "https://ga.jspm.io/npm:cssesc@3.0.0/cssesc.js"
pin "defined", to: "https://ga.jspm.io/npm:defined@1.0.0/index.js"
pin "detective", to: "https://ga.jspm.io/npm:detective@5.2.0/index.js"
pin "didyoumean", to: "https://ga.jspm.io/npm:didyoumean@1.2.2/didYouMean-1.2.1.js"
pin "dlv", to: "https://ga.jspm.io/npm:dlv@1.1.3/dist/dlv.umd.js"
pin "events", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/events.js"
pin "fast-glob", to: "https://ga.jspm.io/npm:fast-glob@3.2.7/out/index.js"
pin "fastq", to: "https://ga.jspm.io/npm:fastq@1.13.0/queue.js"
pin "fill-range", to: "https://ga.jspm.io/npm:fill-range@7.0.1/index.js"
pin "fs", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/fs.js"
pin "fs.realpath", to: "https://ga.jspm.io/npm:fs.realpath@1.0.0/index.js"
pin "fsevents", to: "https://ga.jspm.io/npm:fsevents@2.3.2/fsevents.js"
pin "function-bind", to: "https://ga.jspm.io/npm:function-bind@1.1.1/index.js"
pin "glob", to: "https://ga.jspm.io/npm:glob@7.2.0/glob.js"
pin "glob-parent", to: "https://ga.jspm.io/npm:glob-parent@6.0.2/index.js"
pin "has", to: "https://ga.jspm.io/npm:has@1.0.3/src/index.js"
pin "inflight", to: "https://ga.jspm.io/npm:inflight@1.0.6/inflight.js"
pin "inherits", to: "https://ga.jspm.io/npm:inherits@2.0.4/inherits_browser.js"
pin "is-binary-path", to: "https://ga.jspm.io/npm:is-binary-path@2.1.0/index.js"
pin "is-core-module", to: "https://ga.jspm.io/npm:is-core-module@2.8.0/index.js"
pin "is-extglob", to: "https://ga.jspm.io/npm:is-extglob@2.1.1/index.js"
pin "is-glob", to: "https://ga.jspm.io/npm:is-glob@4.0.3/index.js"
pin "is-number", to: "https://ga.jspm.io/npm:is-number@7.0.0/index.js"
pin "merge2", to: "https://ga.jspm.io/npm:merge2@1.4.1/index.js"
pin "micromatch", to: "https://ga.jspm.io/npm:micromatch@4.0.4/index.js"
pin "minimatch", to: "https://ga.jspm.io/npm:minimatch@3.0.4/minimatch.js"
pin "nanoid/non-secure", to: "https://ga.jspm.io/npm:nanoid@3.1.30/non-secure/index.cjs"
pin "normalize-path", to: "https://ga.jspm.io/npm:normalize-path@3.0.0/index.js"
pin "object-hash", to: "https://ga.jspm.io/npm:object-hash@2.2.0/dist/object_hash.js"
pin "once", to: "https://ga.jspm.io/npm:once@1.4.0/once.js"
pin "os", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/os.js"
pin "path", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/path.js"
pin "path-is-absolute", to: "https://ga.jspm.io/npm:path-is-absolute@1.0.1/index.js"
pin "path-parse", to: "https://ga.jspm.io/npm:path-parse@1.0.7/index.js"
pin "picocolors", to: "https://ga.jspm.io/npm:picocolors@1.0.0/picocolors.browser.js"
pin "picomatch", to: "https://ga.jspm.io/npm:picomatch@2.3.0/index.js"
pin "picomatch/lib/utils", to: "https://ga.jspm.io/npm:picomatch@2.3.0/lib/utils.js"
pin "postcss", to: "https://ga.jspm.io/npm:postcss@8.4.4/lib/postcss.js"
pin "postcss-js", to: "https://ga.jspm.io/npm:postcss-js@3.0.3/index.js"
pin "postcss-nested", to: "https://ga.jspm.io/npm:postcss-nested@5.0.6/index.js"
pin "postcss-selector-parser", to: "https://ga.jspm.io/npm:postcss-selector-parser@6.0.8/dist/index.js"
pin "postcss-selector-parser/dist/util/unesc", to: "https://ga.jspm.io/npm:postcss-selector-parser@6.0.8/dist/util/unesc.js"
pin "postcss-value-parser", to: "https://ga.jspm.io/npm:postcss-value-parser@4.2.0/lib/index.js"
pin "process", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/process-production.js"
pin "queue-microtask", to: "https://ga.jspm.io/npm:queue-microtask@1.2.3/index.js"
pin "quick-lru", to: "https://ga.jspm.io/npm:quick-lru@5.1.1/index.js"
pin "readdirp", to: "https://ga.jspm.io/npm:readdirp@3.6.0/index.js"
pin "resolve", to: "https://ga.jspm.io/npm:resolve@1.20.0/index.js"
pin "reusify", to: "https://ga.jspm.io/npm:reusify@1.0.4/reusify.js"
pin "rimraf", to: "https://ga.jspm.io/npm:rimraf@3.0.2/rimraf.js"
pin "run-parallel", to: "https://ga.jspm.io/npm:run-parallel@1.2.0/index.js"
pin "source-map-js", to: "https://ga.jspm.io/npm:source-map-js@1.0.1/source-map.js"
pin "stream", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/stream.js"
pin "supports-color", to: "https://ga.jspm.io/npm:supports-color@7.2.0/browser.js"
pin "tmp", to: "https://ga.jspm.io/npm:tmp@0.2.1/lib/tmp.js"
pin "to-regex-range", to: "https://ga.jspm.io/npm:to-regex-range@5.0.1/index.js"
pin "url", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/url.js"
pin "util", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/util.js"
pin "util-deprecate", to: "https://ga.jspm.io/npm:util-deprecate@1.0.2/browser.js"
pin "wrappy", to: "https://ga.jspm.io/npm:wrappy@1.0.2/wrappy.js"
pin "xtend", to: "https://ga.jspm.io/npm:xtend@4.0.2/immutable.js"
我可以看到它出现在浏览器(最新的 Chrome)中,但没有一个交互式项目起作用:
<script type="importmap" data-turbo-track="reload">{
"imports": {
"application": "/assets/application-31435dd5f3e00b80f6f70482d4001362501166da1a87a9b9fd72083d43666ad9.js",
"@hotwired/turbo-rails": "/assets/turbo.min-305f0d205866ac9fc3667580728220ae0c3b499e5f15df7c4daaeee4d03b5ac1.js",
"@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-685d40a0b68f785d3cdbab1c0f3575320497462e335c4a63b8de40a355d883c0.js",
"@popperjs/core": "https://ga.jspm.io/npm:@popperjs/core@2.11.0/lib/index.js",
"jquery": "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js",
"tailwindcss": "https://ga.jspm.io/npm:tailwindcss@3.0.7/lib/index.js",
"@nodelib/fs.scandir": "https://ga.jspm.io/npm:@nodelib/fs.scandir@2.1.5/out/index.js",
"@nodelib/fs.stat": "https://ga.jspm.io/npm:@nodelib/fs.stat@2.0.5/out/index.js",
"@nodelib/fs.walk": "https://ga.jspm.io/npm:@nodelib/fs.walk@1.2.8/out/index.js",
"acorn": "https://ga.jspm.io/npm:acorn@7.4.1/dist/acorn.js",
"acorn-node": "https://ga.jspm.io/npm:acorn-node@1.8.2/index.js",
"acorn-node/walk": "https://ga.jspm.io/npm:acorn-node@1.8.2/walk.js",
"acorn-walk": "https://ga.jspm.io/npm:acorn-walk@7.2.0/dist/walk.js",
"anymatch": "https://ga.jspm.io/npm:anymatch@3.1.2/index.js",
"balanced-match": "https://ga.jspm.io/npm:balanced-match@1.0.2/index.js",
"binary-extensions": "https://ga.jspm.io/npm:binary-extensions@2.2.0/index.js",
"brace-expansion": "https://ga.jspm.io/npm:brace-expansion@1.1.11/index.js",
"braces": "https://ga.jspm.io/npm:braces@3.0.2/index.js",
"camelcase-css": "https://ga.jspm.io/npm:camelcase-css@2.0.1/index-es5.js",
"chokidar": "https://ga.jspm.io/npm:chokidar@3.5.2/index.js",
"concat-map": "https://ga.jspm.io/npm:concat-map@0.0.1/index.js",
"cssesc": "https://ga.jspm.io/npm:cssesc@3.0.0/cssesc.js",
"defined": "https://ga.jspm.io/npm:defined@1.0.0/index.js",
"detective": "https://ga.jspm.io/npm:detective@5.2.0/index.js",
"didyoumean": "https://ga.jspm.io/npm:didyoumean@1.2.2/didYouMean-1.2.1.js",
"dlv": "https://ga.jspm.io/npm:dlv@1.1.3/dist/dlv.umd.js",
"fast-glob": "https://ga.jspm.io/npm:fast-glob@3.2.7/out/index.js",
"fastq": "https://ga.jspm.io/npm:fastq@1.13.0/queue.js",
"fill-range": "https://ga.jspm.io/npm:fill-range@7.0.1/index.js",
"fs.realpath": "https://ga.jspm.io/npm:fs.realpath@1.0.0/index.js",
"fsevents": "https://ga.jspm.io/npm:fsevents@2.3.2/fsevents.js",
"glob": "https://ga.jspm.io/npm:glob@7.2.0/glob.js",
"glob-parent": "https://ga.jspm.io/npm:glob-parent@6.0.2/index.js",
"inflight": "https://ga.jspm.io/npm:inflight@1.0.6/inflight.js",
"is-binary-path": "https://ga.jspm.io/npm:is-binary-path@2.1.0/index.js",
"is-core-module": "https://ga.jspm.io/npm:is-core-module@2.8.0/index.js",
"is-extglob": "https://ga.jspm.io/npm:is-extglob@2.1.1/index.js",
"is-glob": "https://ga.jspm.io/npm:is-glob@4.0.3/index.js",
"is-number": "https://ga.jspm.io/npm:is-number@7.0.0/index.js",
"merge2": "https://ga.jspm.io/npm:merge2@1.4.1/index.js",
"micromatch": "https://ga.jspm.io/npm:micromatch@4.0.4/index.js",
"minimatch": "https://ga.jspm.io/npm:minimatch@3.0.4/minimatch.js",
"nanoid/non-secure": "https://ga.jspm.io/npm:nanoid@3.1.30/non-secure/index.cjs",
"normalize-path": "https://ga.jspm.io/npm:normalize-path@3.0.0/index.js",
"object-hash": "https://ga.jspm.io/npm:object-hash@2.2.0/dist/object_hash.js",
"once": "https://ga.jspm.io/npm:once@1.4.0/once.js",
"path-is-absolute": "https://ga.jspm.io/npm:path-is-absolute@1.0.1/index.js",
"path-parse": "https://ga.jspm.io/npm:path-parse@1.0.7/index.js",
"picocolors": "https://ga.jspm.io/npm:picocolors@1.0.0/picocolors.browser.js",
"picomatch": "https://ga.jspm.io/npm:picomatch@2.3.0/index.js",
"picomatch/lib/utils": "https://ga.jspm.io/npm:picomatch@2.3.0/lib/utils.js",
"postcss": "https://ga.jspm.io/npm:postcss@8.4.4/lib/postcss.js",
"postcss-js": "https://ga.jspm.io/npm:postcss-js@3.0.3/index.js",
"postcss-nested": "https://ga.jspm.io/npm:postcss-nested@5.0.6/index.js",
"postcss-selector-parser": "https://ga.jspm.io/npm:postcss-selector-parser@6.0.8/dist/index.js",
"postcss-selector-parser/dist/util/unesc": "https://ga.jspm.io/npm:postcss-selector-parser@6.0.8/dist/util/unesc.js",
"postcss-value-parser": "https://ga.jspm.io/npm:postcss-value-parser@4.2.0/lib/index.js",
"queue-microtask": "https://ga.jspm.io/npm:queue-microtask@1.2.3/index.js",
"quick-lru": "https://ga.jspm.io/npm:quick-lru@5.1.1/index.js",
"readdirp": "https://ga.jspm.io/npm:readdirp@3.6.0/index.js",
"resolve": "https://ga.jspm.io/npm:resolve@1.20.0/index.js",
"reusify": "https://ga.jspm.io/npm:reusify@1.0.4/reusify.js",
"rimraf": "https://ga.jspm.io/npm:rimraf@3.0.2/rimraf.js",
"run-parallel": "https://ga.jspm.io/npm:run-parallel@1.2.0/index.js",
"source-map-js": "https://ga.jspm.io/npm:source-map-js@1.0.1/source-map.js",
"tmp": "https://ga.jspm.io/npm:tmp@0.2.1/lib/tmp.js",
"to-regex-range": "https://ga.jspm.io/npm:to-regex-range@5.0.1/index.js",
"util-deprecate": "https://ga.jspm.io/npm:util-deprecate@1.0.2/browser.js",
"wrappy": "https://ga.jspm.io/npm:wrappy@1.0.2/wrappy.js",
"xtend": "https://ga.jspm.io/npm:xtend@4.0.2/immutable.js",
"ansi-styles": "https://ga.jspm.io/npm:ansi-styles@4.3.0/index.js",
"assert": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/assert.js",
"buffer": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/buffer.js",
"chalk": "https://ga.jspm.io/npm:chalk@4.1.2/source/index.js",
"color-convert": "https://ga.jspm.io/npm:color-convert@2.0.1/index.js",
"color-name": "https://ga.jspm.io/npm:color-name@1.1.4/index.js",
"crypto": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/crypto.js",
"events": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/events.js",
"fs": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/fs.js",
"function-bind": "https://ga.jspm.io/npm:function-bind@1.1.1/index.js",
"has": "https://ga.jspm.io/npm:has@1.0.3/src/index.js",
"inherits": "https://ga.jspm.io/npm:inherits@2.0.4/inherits_browser.js",
"os": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/os.js",
"path": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/path.js",
"process": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/process-production.js",
"stream": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/stream.js",
"supports-color": "https://ga.jspm.io/npm:supports-color@7.2.0/browser.js",
"url": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/url.js",
"util": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.13/nodelibs/browser/util.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
"controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
}
}</script>
我不太擅长 JavaScript,我错过了什么?我需要在某处初始化一些东西吗?
谢谢