标签: tailwind-css

有没有机会改变它，或者我必须使用 Tailwind 的移动优先方法？

我有以下内容：

.flex .flex-row .flex #1 .flex #2

两个弹性盒的高度相同。当内容发生.flex #2变化时，两个弹性框的高度也会在底部留下大量空白空间 .flex #1

如何防止这种情况发生并导致 的内容.flex #2滚动？

我不想设置任何固定高度，希望 的高度始终与的内容.flex #2高度保持相同。.flex #1

我想在我的前端项目中nuxtjs一起使用。tailwindcss我已经tailwindcss通过这样的模块集成：

  buildModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss'
  ],

现在可以tailwindcss工作了，但是代码完成却不起作用。有两个 Intellij IDEA 插件确实为 tailwind 添加了代码完成 - 但是当我开始自定义文件时，tailwind.config.js它们失败了，因为它们只建议基于默认 tailwind 配置的类（它们无法识别我自己的类，并且它们建议不再可用的类，因为我已通过配置文件删除了它们）。

我可以使用 React 进行非常类似的设置nextjs- 因为这个框架在文件夹中创建了一个输出 css 文件.next，并且 IDEA 可以接收该文件。这启发了我，所以我尝试删除该模块@nuxtjs/tailwindcss，并tailwindcss通过. 即使我在该文件夹中添加了该选项，也没有在该文件夹中创建文件。postcssnuxt.nuxtextractCSS: true

我也想达到nextjs这样的结果nuxtjs。有人有一个优雅的解决方案吗？

PS：我想继续使用 IDEA，并且我想避免每次我的 tailwind 配置更改时通过项目中的控制台手动创建 tailwind 输出。

我一直在按照官方视频教程学习如何使用 tailwind css，我只是想尝试将站点示例部署到 Netlify，看看它是否可以使用拖放功能工作。

这意味着获取整个项目文件夹并将其转储到 netlify 中。这通常适用于普通 html css js 网站，但由于某种原因我收到错误 Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

该项目的结构如下：

我究竟做错了什么？在 build 文件夹中还有另一个名为 tailwind.css 的文件

我将 Tailwindcss 与 sweetalert2 一起使用。并使用此配置生成警报：

customClass: {
  ...
  image: 'hidden md:inline-block',
},

我使用 ImageUrl 进行警报配置。所以我的swal2-header包含：

<img class="swal2-image hidden md:flex" src="/path/to/image" alt="" style="display: flex;">

由于hidden和md:flex类，我希望图像以小分辨率隐藏并在md断点处变得可见，但内联style="display: flex;"禁用了我的hidden类并且实际上被它替换了。那么如何删除或禁用内联类呢？

我给图像指定了固定的高度。但现在的问题是，高度也适用于拇指。我怎样才能防止这种情况发生？

<Carousel width="600px" dynamicHeight={false}>
  {data?.book?.images.map((image, i) => (
    <img src={image} alt={`${i}`} className="h-128" />
  ))}
</Carousel>;

我在使用 Symfony 设置 TailwindCSS 时遇到问题，我不确定出了什么问题

webpack.config.js

var Encore = require(\'@symfony/webpack-encore\');\n\nif (!Encore.isRuntimeEnvironmentConfigured()) {\n    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || \'dev\');\n}\n\nEncore\n    .setOutputPath(\'public/build/\')\n    .setPublicPath(\'/build\')\n    .addStyleEntry(\'tailwind\', \'./assets/css/tailwind.css\')\n    .enablePostCssLoader((options) => {\n         options.config = {\n          // directory where the postcss.config.js file is stored\n                 path: \'./postcss.config.js\'\n         };\n    })\n    .splitEntryChunks()\n\n    .enableSingleRuntimeChunk()\n    .cleanupOutputBeforeBuild()\n    .enableBuildNotifications()\n    .enableSourceMaps(!Encore.isProduction())\n    .enableVersioning(Encore.isProduction())\n\n    .configureBabelPresetEnv((config) => {\n        config.useBuiltIns = \'usage\';\n        config.corejs = 3;\n    })\n\n;\n\nmodule.exports = Encore.getWebpackConfig();\n

顺风.css

@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n

postcss.config.js

let tailwindcss = require(\'tailwindcss\');\n\nmodule.exports = {\n    plugins: [\n        tailwindcss(\'./tailwind.config.js\'), // your tailwind.js configuration …

我正在尝试像这个例子一样重新创建一个带有顺风的水平滚动导航栏，底部没有滚动条（减少屏幕的宽度以便能够滚动）

https://getbootstrap.com/docs/5.0/examples/blog/

我使用 Tailwind 尝试了以下操作，但我无法弄清楚如何删除与上面的引导程序示例类似的水平滚动条。有人可以帮忙吗？

<ul class="flex overflow-x-auto whitespace-nowrap p-4">
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
</ul>

我尝试将文本设为白色，但为什么不起作用？

html.erb

<h1 class="text-3xl text-center pt-5 bg-green-800 text-white">Epicery</h1>  <!--  here it works very well the text-white -->
     <div class="flex pt-5 pb-5 bg-green-800">
         <div class="mx-auto">
             <ul class="flex">
                 <li class="mr-6 text-white"> <!--  here it does not work text-white -->
                     <a class="text-white text-sm hover:text-gray-900 hover:bg-white p-4 rounded" href="#">Link</a>
                 </li>
             </ul>
         </div>
     </div>

我导入了顺风CDN

应用程序.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="">
                <div class="w-16 h-16 border-b-30 border-l-30 border-solid border-black">
                    <div class="h-16 w-16 border-t-30 border-r-30 bg-transparent"></div>
                </div>
</div>

如何在没有插件的情况下使用 tailwindCss 制作三角形？