标签: tailwind-css

基于 tailwindcss 2 模态示例https://alpinetoolbox.com/examples/modal 我使用 header/footer/ 内容制作模态对话框，其中包含许多行。我尝试用滚动条设置内容，例如

<div  style="height : calc( 100vh - 120 ) !important;" >
    <div class="modal-header flex justify-between items-center pb-2">
         ...
    </div>

     <div class="modal-content py-4 text-left px-6  overflow-y-auto "  style="height : calc( 100vh - 320 ) !important;">
                   
            

但失败了。请看一下codepen：https ://codepen.io/sergeynilov/pen/vYyPrrE

修改块： 如果要​​在内容块样式定义中设置，我可以根据需要进行滚动。

<div class="modal-content py-4 text-left px-6"  style="overflow-y: auto; max-height: 680px;">

接下来我可以制作自定义类（现在尚未实现）并放置

overflow-y: auto; max-height: 680px

进去。对于任何设备，我都会制作不同高度的@media 块。这就是我通常使用 scss 的方式。但我想 tailwindcss 有更好的决定吗？

谢谢！

我想立即使用开发中的纱线构建所有顺风类，因此我将它们全部预先构建。

为什么？

我的问题是这样的：

我正在我的 Laravel 项目中尽我所能地“做前端”，并且正在尝试 Tailwind 中的所有这些不同的类。在我看来，只有项目中使用的顺风类才构建在yarn run（或开始时yarn watch）。当我活跃时，这会导致问题yarn watch。由于yarn watch只监视我的 scss 文件，而不监视我的刀片，因此当我向刀片文件添加新颖的顺风类时，它不会触发构建。因此，每次使用小说类时，我都需要手动关闭手表并重新启动它。

我正在掌握的一个解决方案是，在开发中预先构建每个顺风类，甚至是迄今为止未使用的类。怎么可能呢？

我在使用 tailwind-css 将图像与网格的子 div 内的右侧对齐时遇到困难。我已经尝试过float-right，right-0等等，但没有一个起作用。

.next-visit {
  background-color: #7645c1;
  margin: 5px 1px;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
}

  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

 <div class="next-visit">

      <div class="grid grid-cols-2 gap-4">
        <div>
          <span class="text-sm">Next visit</span>
          <p class="text-lg font-semibold">19 Oct 2021</p>
        </div>
        <div class="w-12">
          <img src="https://placeimg.com/640/480/any" class="float-right">
          </div>
      </div>
    </div>

预期结果

我试图使右侧的下拉菜单溢出，以便它完全可见。我不想让表格变大，我希望下拉菜单比表格更大。我尝试了多种不同的溢出和绝对/相对定位的方法，但失败了。我需要更改哪些类才能使其正常工作？我很感激任何意见！

用于测试的 Tailwind 游乐场：https://play.tai​​lwindcss.com/0iiSxy59aP

干杯

在 tailwindcss 的 Alpinejs 页面上，我使用通过单击按钮打开的模式。问题是，在加载页面时，我看到闪烁的对话框内容。我尝试将隐藏类设置为模态窗口，并在 init 方法末尾将 isPageLoaded 变量设置为 true

<div class="overflow-auto border-2 border-grey-900" x-data="app()" x-init="appInit()">

    <div class="w-full h-full">
        <button
            type="button"
            class="bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full"
            @click="showModal = true"
        >Open modal
        </button>
    </div>
    <!--Overlay-->

    <div class="overflow-auto w-full h-full hidden" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'fixed inset-0 z-10 flex items-center justify-center': showModal, 'visible' : isPageLoaded }">

...
<script>

    function app() {
        return {
            showModal : false,
            isPageLoaded : false,

            appInit: function () {
                console.log('appInit::')
                this.isPageLoaded= true
            }, …

我坐了 3 个小时，仍然无法弄清楚出了什么问题。我是编程方面的新手，但在后端。我从顺风组件导航栏粘贴，下拉菜单会自动打开。我尝试了很多东西，或者我不知道如何制作它们，或者我不知道...也尝试过alpinejs，但不起作用或者我做错了什么。[我在此处添加了图片以显示此下拉列表，该下拉列表不会关闭并且无论如何都会打开。我正在尝试使用 Laravel 上的 Blade 来解决这个问题。

<!-- This example requires Tailwind CSS v2.0+ -->
<nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="relative flex items-center justify-between h-16">
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <!-- Mobile menu button-->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!--
            Icon when menu is closed.

            Heroicon name: outline/menu

            Menu open: "hidden", Menu closed: "block"
          -->
          <svg class="block h-6 w-6" …

我可以使用预定义的tailwind类在 HTML 中设置颜色，例如：

<div class="border border-purple-500"></div>

但我也想在我的自定义 CSS 中使用相同的颜色，例如：

.my-class {
    border: 1px solid $purple-500;
}

是否可以在CSS中获取顺风颜色值？

使用以下配置，一切都工作正常npm run dev，但是当我们这样做时npm run build，出现了错误：

./assets/scss/main.scss 中的错误（./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js？ref--7-oneOf-1-1！./node_modules/@ nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf- 1-3！./assets/scss/main.scss）模块构建失败（来自./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js）：ParserError：第1行语法错误，第23栏

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'app-name',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/open-sans-all/css/open-sans.min.css' },
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/scss/main.scss', …

我最近升级了 Next.js 应用程序中的 Tailwind 版本，结果，一些事情变得不稳定。我注意到，对于具有该type="text"属性的输入字段，当它们聚焦时，它们的边框现在会更改为不同的颜色（我从未分配过这种颜色）。在升级 Tailwind 之前，当文本输入字段悬停并聚焦时，边框颜色保持不变。有趣的是，这种情况不会发生在我的任何其他不包含该type="text"属性的表单字段上。如果有人能解释为什么会发生这种情况以及我如何解决这个问题，我将非常感激。

这是悬停在文本输入字段上时的图像： 悬停在文本输入字段上（预期）

这是该文本输入字段聚焦时的图像： 聚焦时的文本输入字段（意外）

我正在尝试运行“npm run dev”，但它最终给了我一个错误。我正在使用 Laravel Mix 和 Tailwind CSS。

版本

• laravel-mix：6.0.22
• tailwind-css: ^2.0.4
• @tailwindcss/jit：^0.1.18，

资源/css/app.css

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

webpack.mix.js

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

tailwind.config.js

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss("resources/css/app.css", "public/css", [
        require('@tailwindcss/jit'),
    ])

./resources/css/app.css 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/ dist/cjs.js): TypeError: 无法在 /var/www/work 的 _default (/var/www/work/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5) 处读取未定义的属性“主题” /node_modules/@tailwindcss/jit/src/index.js:50:11 在 LazyResult.runOnRoot (/var/www/work/node_modules/postcss/lib/lazy-result.js:339:16) 在 LazyResult.runAsync ( /var/www/work/node_modules/postcss/lib/lazy-result.js:391:26) 在异步 Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:87: 14) 在 processResult (/var/www/work/node_modules/webpack/lib/NormalModule.js:701:19) 在 /var/www/work/node_modules/webpack/lib/NormalModule.js:807:5 在 /var /www/work/node_modules/loader-runner/lib/LoaderRunner.js:399:11 在 /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:251:18 在 context.callback （/var /www/work/node_modules/loader-runner/lib/LoaderRunner.js:124:13) 在 Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:96:7) …