标签: tailwind-css

因此，我的 nextjs 应用程序通常配置了 tailwind，然后运行命令来npm安装 prettier 和 prettier tailwind 插件，据我了解，它应该立即工作。

我在 vscode 中的默认格式化程序是 Prettier，我确保了这一点，并且在保存时我的文件使用 Prettier 进行格式化，但类未排序。

我没有添加任何更漂亮的配置文件或任何东西。只是我的顺风配置文件，也不包含与插件相关的任何内容。

Prettier 插件自动加载出现问题，但不知道如何修复它。

我试图在卡片的右侧浮动一个按钮。我希望它出现在右下角。

当我使用浮点数时。它出现在父div之外，有没有办法正确定位它？

<div class="m-10">
    <div>
        <div class="bg-white shadow-lg border-grey w-1/3 ">
            <div class="p-4 flex">
                <div class="pt-3 text-center font-bold text-2xl w-16  h-16 bg-grey-lightest">
                    D
                </div>
                <div class="ml-4">
                    Team Name
                </div>
            </div>
            <div class="float-right">
                <a :href="'/company/' + team.id">
                    <button class="ml-2 bg-blue hover:bg-blue-dark text-white text-sm font-bold rounded p-2">
                        View
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>

我有一个带有代码的正在运行的沙箱

https://codesandbox.io/s/tailwind-css-nl0ph

TailwindCSS 看起来像一个很棒的前端工具，但我想知道如何将它与 Rails Slim 模板语言一起使用？

例如：

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

如果我通过 HTML2SLIM 运行它，我会得到以下建议：

.bg-red-500.sm:bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500

这会产生以下 HTML：

<div class="bg-red-500 sm">
   <bg-green-500 class="md">
      <bg-blue-500 class="lg">
         <bg-pink-500 class="xl">
            <bg-teal-500></bg-teal-500>
         </bg-pink-500>
      </bg-blue-500>
   </bg-green-500>
</div>

似乎冒号 ':' 被解释为多个 html 元素。我想知道是否有办法解决这个问题？我很想在 TailwindCSS 中使用 Slim。

到目前为止，我已经使用 Rails 的 content_tag 取得了一些进展：

= content_tag :span, 'Accounts', class: 'invisible md:visible lg:visible'

但我只能到此为止。

我想知道是否可以将 Tailwindcss 与 Figma 一起使用？如果有人这样做，有什么例子可以看吗？我看到可以从 Figma 导出颜色并将它们导入到 taiwind 配置中。但是 Tailwindcss 实用程序呢？此外，它应该适用于 Tailwind v1。此致

特别是，我在ASP.NET Preview 8中使用Blazor（托管服务器）。我尝试使用Libman添加它-但这似乎更多是关于从CDN下载文件。我想向我的构建过程介绍Tailwind。

这是我应该使用Webpack之类的情况吗？如果是这样，无论如何，如何使webpack成为我的构建过程的一部分！

我正在使用配置文件构建顺风并将其包含在反应项目中。

我想在 javascript/React 中获取活动断点值。我怎样才能达到同样的目标。？

 <div class="block  sm:hidden md:hidden lg:hidden xl:hidden">al</div>
  <div class="hidden sm:block  md:hidden lg:hidden xl:hidden">sm</div>
  <div class="hidden sm:hidden md:block  lg:hidden xl:hidden">md</div>
  <div class="hidden sm:hidden md:hidden lg:block  xl:hidden">lg</div>
  <div class="hidden sm:hidden md:hidden lg:hidden xl:block">xl</div>
</div>

上面显示了活动断点。但是如何在不包含上述任何标记的情况下在 js 中获得相同的结果。？

我无法弄清楚为什么覆盖在我的项目中不起作用。我正在尝试使我的网站在移动设备上可读，目前它正在显示桌面大小的按钮。我正在使用顺风并做出反应。我的按钮组件是：

return <button className="sm:text-xs sm:h-1 redbtn" onClick={onClick}>{children}</button>

但是 text-xs 仅在我删除 sm: 前缀时才有效。我试过包括

screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px'
        }

在我的配置文件中，但这并没有改变任何东西。

我正在尝试使用 Tailwind css 在悬停时使 div 更宽。这可能吗？如何？

我已经尝试了以下但没有奏效：

class="w-1/3 hover:w-3/5"

我正在尝试安装 Tailwind 来练习一些基本的东西来了解这个框架是如何工作的。我遵循了框架创建者 Adam Wathan 提供的每一步，在运行时我遇到了命令行错误：您必须传递一个有效的文件列表来解析。我在定义顺风自定义标记时也遇到了一个错误

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

首先它在规则@tailwind 上说未知，然后在安装 stylelint 并按照 @hasusuf 回答之后

出现另一个错误！

并且相同的命令错误仍然存​​在。

有什么帮助吗？

我创建了一个包装组件，通过字符串提供类名列表，以支持 Tailwind 实用程序转换。这旨在嵌套在 TransitionGroup 组件中以支持多个项目的动画，如列表。

我能够很好地制作动画，但输入不起作用。你能帮我找出这段代码中的错误吗？

反应 16.13.1 反应过渡组 4.4.1

沙盒：https : //codesandbox.io/s/delicate-feather-ymozq

（登录那里观看 div 引用，以防类没有被应用，但它们似乎工作正常）

import React, { ReactNode } from "react";
import { Transition as ReactTransition } from "react-transition-group";

interface TransitionProps {
  in?: boolean;
  timeout: number;
  enter?: string;
  enterFrom?: string;
  enterTo?: string;
  leave?: string;
  leaveFrom?: string;
  leaveTo?: string;
  children: ReactNode;
}

export function CSSTransition(props: TransitionProps) {
  const { enter, enterFrom, enterTo, leave, leaveFrom, leaveTo } = props;
  const nodeRef = React.useRef<HTMLDivElement>(null);

  const enterClasses = splitClasses(enter);
  const enterFromClasses …