ruby-on-rails Rails 7 +导入Map/任何内容+尾风CSS + JS =混乱

gtlvzcf8 于 2023-01-27 发布在 Ruby

关注(0)|答案(2)|浏览(244)

首先，我更多的是一个Rails后端人员。今天的JS世界让我害怕。我知道这是一个超级基本的问题，但我已经绞尽脑汁了好几天试图弄清楚，this out。我不知道为什么我不能把CDN链接放在我的HTML中的某个地方，并获得我需要的所有JS。那些是美好的旧时代...
无论如何，我有一个使用导入Map的新Rails 7应用程序（它们都是吗？）我尝试从https://tailwindui.com/preview获取下拉“组件（该页面的第一个导航栏）工作。它开始弹出打开，没有悬停效果，无法关闭。我的目标是使用更多这样的组件，但我读过的所有文件似乎都让我觉得有一部分我不明白。

宝石文件包含gem "tailwindcss-rails", "~> 2.0" # github: "rails/tailwindcss-rails"
应用程序/资产/样式表/应用程序.tailwind.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

应用程序/资产/javascript/应用程序.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails

// what else needs to go here???

配置/顺风配置js

// const defaultTheme = require('tailwindcss/defaultTheme')

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

我还需要把什么放在哪里才能让这个工作呢？谢谢你好心地填补了我大脑中缺失的碎片。

ruby-on-rails

来源：https://stackoverflow.com/questions/71254202/rails-7-importmaps-whatever-tailwindcss-js-boggled

2条答案

按热度按时间

flvtvl501#

我知道你问这个问题已经有一段时间了，但我最近一直在与这个问题作斗争，我想谈谈我的发现，以防有人想知道。
因此，Tailwind UI提供3种变体的组件：如果您选择HTML，那么您必须弄清楚如何编写自己的JavaScript。this answer提到了这一点，但是我将详细说明这一点。
除了在他们的网站上提到"做你自己的JavaScript"，他们还告诉我们在添加JavaScript时应该如何设置组件的样式：

<!--
            Dropdown menu, show/hide based on menu state.

            Entering: "transition ease-out duration-100"
              From: "transform opacity-0 scale-95"
              To: "transform opacity-100 scale-100"
            Leaving: "transition ease-in duration-75"
              From: "transform opacity-100 scale-100"
              To: "transform opacity-0 scale-95"
          -->

然而，这并没有告诉我们必须自己编写代码。当然，我们遗漏了一些东西，对吗？事实证明，并不是这样。
基本上，布局的"动态"方面是通过Headless UI实现的，Headless UI是由同一批人开发和维护的一组组件，它只有三个公共包：x一个一个一个一个一个一个一个一个一个一个一个和x一个一个一个一个二个一个。
我运行了npm i @headlessui/tailwindcss并添加了@headlessui/tailwindcss到插件中，但它并没有做太多事情。如果你检查包的源代码，你会发现一个非常小的index.js，它只添加了一些实用程序类。所以这没有帮助，我不得不删除它。
到目前为止，最可行的选择似乎是获取React或Vue版本的模板，并将其集成到您的管道中，否则您将不得不编写一堆JS来基本上重新实现自己的无头UI。
我仍然在寻找一个基于importmap的解决方案来集成Vue，而webpack应该是非常直接的。