我想为其内容制作水平滚动的表格，并且我尝试whitespace-nowrap对具有长内容的表格单元格使用类，并对所有表格使用overflow-x-auto，例如：

    <div class="editor_listing_wrapper_bix_width">


        <table class=" overflow-x-auto p-1 m-1 d2">
            <thead class="bg-gray-700 border-b-2 border-t-2 border-gray-300">
            <tr>
                <th class="w-1/12 py-2">Id</th>
                <th class="w-4/12 py-2">Name</th>
                <th class="w-4/12 py-2">Description</th>
                <th class="w-1/12 py-2"></th>
            </tr>
            </thead>
            <tbody>

            <tr>

                <td>1</td>
                <td class="whitespace-nowrap">
                    Laptops
                    <small class="pl-2 pt-1">
                        ( Used in 2 ad(s) )
                    </small>
                </td>

                <td class="whitespace-nowrap p-1">Laptops description Lorem ipsum dolor sit amet,
                    consectetur
                    adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua....
                </td>

但看起来水平滚动适用于所有区域，不适用于我的桌子

请看笔：https ://codepen.io/sergeynilov/pen/eYgjVgM

我使用 tailwindcss 2.1.0。

谢谢！

我正在尝试使用 Tailwind CSS 创建一个 3 列的仪表板布局。

我有 - 标题位于顶部，列表位于中间，按钮位于底部位置。我希望整个组件的高度不大于屏幕高度。换句话说，我的列的最大高度应该是屏幕高度。

对于每一列，我希望列表可以在页眉和页脚之间滚动，同时仍然保持页眉、页脚和列表的组合高度不应超过屏幕高度。

我正在尝试使用 Tailwind CSS 来做到这一点，但如果有人也可以使用常规 css 重定向我，我会没事的。

我正在学习 Livewire，我想在我的表单中使用日期选择器。我从tailwindcomponents.com找到了一个有用的组件，但无法理解如何将其转换为 livewire 可重用组件。

tailwindcomponents：https://tailwindcomponents.com/component/datepicker-with-tailwindcss-and-alpinejs

我在视图目录中创建了一个 Blade 文件，但无法理解如何添加 HTML 和 JS 代码。还可以访问生日值，例如wire：model =“birthday”

<x-input.datepicker 线：model="生日" id="datepicker"/>

我有一个黑暗模式组件，它是太阳和月亮图标之间的简单切换。

暗模式.tsx

import { observer } from 'mobx-react'
import { MoonIcon, SunIcon } from '@heroicons/react/solid'

import { useStore } from '@/store/index'

export const DarkMode = observer(() => {
    const { theme, setTheme, isPersisting } = useStore()

    if (!isPersisting) return null

    return (
        <>
            {theme === 'dark' && (
                <button
                    className="fixed bottom-12 right-12 focus:outline-none"
                    title="Activate light mode"
                    onClick={() => {
                        setTheme('light')
                    }}
                >
                    <MoonIcon className="w-8 h-8" />
                </button>
            )}
            {theme === 'light' && (
                <button
                    className="fixed bottom-12 right-12 focus:outline-none"
                    title="Activate dark …

下面的 Tailwindcss 代码在创建相同高度的卡片方面做得很好。

如何让所有 3 个按钮与每张卡片的底部对齐？

我预计将“bottom-0”添加到持有按钮的 div 中会起作用，但我认为问题是“bottom”是相对于其父级的，这不是卡的完整高度。

快速游乐场： https://play.tai​​lwindcss.com/SX4Yu2OT3f

    .p-10.grid.grid-cols-1.sm:grid-cols-1.md:grid-cols-3.lg:grid-cols-3.xl:grid-cols-3.gap-5
      / Card 1
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 1
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam …

Divide-y 用于在堆叠元素之间添加分隔线。然而，当使用 AlpineJS (x-for) 和 TailwindCSS 渲染列表时，我们发现模板标签导致 CSS 也在此处添加分隔线，这是不希望有的效果。

有没有一种顺风方式可以防止这种情况发生？

例如

<ul role="list" class="divide-y divide-gray-200" x-data="taskModel()">
    <template x-for="task in taskList">
        <li class="py-4 flex">
            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
            <div class="ml-3">
                <p class="text-sm font-medium text-gray-900" x-text="task.name"></p>
                <p class="text-sm text-gray-500" x-text="task.email"></p>
                <p class="text-sm text-gray-500" x-text="task.due"></p>
            </div>
        </li>
    </template>
</ul>

<script>
    function taskModel() {
        return {
            taskList: [
                {
                    name: 'Calvin Hawkins',
                    email: 'calvin.hawkins@example.com',
                    due: '2021-08-28'
                }
            ]
        };
    }
</script>

谢谢你！

我有一个下一个项目，在这里存储： https: //github.com/DoctorSte/remoteOS

我有一个 Columns 组件，它有一个名为 grid-cols-[x] 的类，其中 X 是一个 prop。

export const Columns = ({
  children,
  columns,
  border,
  background,
  align,
  ...rest
}) => {
  return (
    <section
      className={`grid  md:grid-cols-${columns} grid-cols-1 items-${align} border-t-${border} ${background} gap-4 px-10 py-10 lg:px-48 w-full `}
      {...rest}
    >
      {children}
    </section>
  );
};

在本地它显示正常，但在生产中柱结构会制动。经检查，该部分将“grid-cols-4”作为一个类，但显示为单列。知道可能是什么原因造成的吗？

所以，我注意到我的一些顺风CSS在生产中没有正确生成，但在我的本地上表现良好，有什么想法吗？我正在使用，vue + tailwind + laravel + 惯性堆栈。另外，我在生产中部署任何东西都没有经验，因此我正在使用 digital ocean 的新“应用程序”。

生产

• Ubuntu 18.04.5 LTS
• 节点版本：12.22.5

当地的

• Ubuntu 20.04.2 LTS
• 节点版本：v16.7.0

它应该是什么样子（本地）

结果如何（生产）

这是我的 tailwind.config.js

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    // './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        gray: {
          750: '#2d3748',
          850: '#1a202c'
        },
      },
      spacing: {
        112: '28rem',
        120: '30rem',
        128: '32rem',
        136: '34rem',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我在构建生产中运行的命令

Build Command
composer …

我想知道在 tailwind 配置文件中可以配置什么，我只是无法掌握在这个文件中可以配置什么，特别是基础部分。

@tailwind base;

@tailwind components;

@tailwind utilities;

有人可以详细说明一下吗？

我使用 Tailwind-css 和 React，并希望在 2 秒后隐藏 div 元素。用户按下按钮，小吃栏会出现 2 秒，表明建议已发送。我使用setTimeout但它不是正确的变体。函数 Snackbar 获取小吃栏是否打开（Snackbar = true）、小吃栏上的消息（suggestResponse.message）以及如果Snackbar 关闭（false）则应发送的属性

const SnackbarResult = ({
  snackbar,
  snackbarClose,
  suggestResponse,
}: ISnackbarProps) => {
  if (snackbar) {
    setTimeout(() => snackbarClose, 2000);
  }
  if (!snackbar) return null;
  return (
    <div className="bg-green-500 fixed right-2 bottom-1 font-medium p-2 md:p-5">
      {suggestResponse.message}
    </div>
  );
};