标签: tailwind-css

有没有办法在特定的 div 或组件上禁用 Tailwind 的预检？例如所见即所得编辑器，或者想要逐步迁移到 Tailwind。

我尝试实现前缀 last: ，但没有成功，如 Tailwind.css 文档中所示。谁能指出我做错了什么？我无法完成这项工作。

先感谢您。

反应组件

{items.map((item, i) => {
            return (
              <li
                key={i.toString()}
                v-for="(item, i) in items"
                className="pb-sm xl:pb-md last:pb-0" // This is the problematic fellow!
              >
                <div className="grid grid-cols-12">
                  <div className="col-start-2 col-span-10 md:col-start-2 md:col-span-8  pb-2 sm:pb-xs md:pb-xs lg:pb-xs xl:pb-0">
                    <div className="serif text-h5 xl:text-h4 lg:text-h4 md:text-h4 leading-snug xl:leading-tight lg:leading-tight md:leading-snug">
                      {item}
                    </div>
                  </div>
                  <div className="col-start-2 col-span-10 sm:col-start-5 sm:col-span-6 md:col-start-5 md:col-span-6 lg:col-start-5 lg:col-span-6 xl:col-start-5 xl:col-span-3 pb-xs sm:pb-xs">
                    <div className="text-p sm:text-p">{description[i]}</div>
                  </div>
                </div>
              </li>
            )
          })}

我正在尝试使用 ReactJS 和 TailwindCSS 创建一个设计系统。

我创建了一个Button具有基本样式的默认组件，如下所示：

import React from "react";
import classNames from "classnames";

const Button = React.forwardRef(
  ({ children, className = "", onClick }, ref) => {
    const buttonClasses = classNames(
      className,
      "w-24 py-3 bg-red-500 text-white font-bold rounded-full"
    );

    const commonProps = {
      className: buttonClasses,
      onClick,
      ref
    };

    return React.createElement(
      "button",
      { ...commonProps, type: "button" },
      children
    );
  }
);

export default Button;

然后我在我的页面中使用Button：

import Button from "../src/components/Button";

export default function IndexPage() {
  return ( …

我有这样的事情：

<main id="parent" class="h-screen flex justify-center items-center">
  
  <div id="child" class="bg-red-200 w-96 h-72 flex">
  </div>
  
</main>

当鼠标悬停在 上时，我将如何申请.bg-blue-100唯一的？#parent#child

group（我知道对父母和group-hover孩子使用可以达到相反的效果。）

module.exports = {
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layout/**/*.{js,ts,jsx,tsx}",
    "./const/**/*.{js,ts,jsx,tsx}",
    "./fonts/**/*.{js,ts,jsx,tsx,ttf}",
    "./utils/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false,
  theme: {
    extend: {
      colors: {
        "brand-green": "#4DF69B",
        "brand-amber": "#FF8656",
        "brand-red": "#FF5656",
        "brand-gray": "#7E7E7E",
      },
      width: {
        content: "fit-content",
      },
      top: {
        20: "5rem",
      },
      fontFamily: {
        DINAlternate: ["DINAlternate", "sans-serif"],
      },
    },
  },
  variants: {
    extend: {
      borderWidth: ["hover"],
      textColor: ["group-focus"],
    },
  },
  plugins: [],
};

我的配置。

我将 next.config.js 更改为 next.config.ts，然后它告诉我它应该具有 .js 格式，我重写了它，正如我所想，在我尝试将每个文件移至 .ts 格式后，我的顺风车断了。它适用于 margins/paddins，但不适用于 bg，尽管它适用于 text-red-200

如果我检查元素，我可以看到 bg-brand-red 类，但它只是不应用它们。它运行良好，但在我重构代码后，它崩溃了，但是一旦我将所有内容重置为上一次提交，我仍然遇到背景颜色不起作用的问题。

这很奇怪，因为它工作过一次，5 分钟后就坏了，即使我回滚到 github 上的最后一次提交，它仍然坏了

我怎样才能知道问题是什么？

我试图在 vscode 上使用更漂亮的格式化程序插件来实现一种行为，当 html 标签有多个类时，它会破坏每个类的行中的每个类，但只有当该类行达到“自动换行列”限制时（vscode 配置）。是否可以？

目前的行为

    <div                                                                                             | - LINE LIMIT
        class="m-10 flex min-h-screen items-center justify-center rounded-2xl border-2 border-red-500
        bg-indigo-500 p-10 shadow-2xl"
    ></div>
    <div class="flex items-center justify-center"></div>

预期行为

    <div                                                                           | - LINE LIMIT
        class="
            m-10
            flex
            min-h-screen
            items-center
            justify-center
            rounded-2xl
            border-2
            border-red-500
            bg-indigo-500
            p-10
            shadow-2xl
        "
    ></div>
    <div class="flex items-center justify-center"></div>

我正在尝试整合tailwindcss到我的VueJS项目中。

这是我的配置文件：

module.exports = {
  ... other configurations
  plugins: [
    require('tailwindcss/plugins/container')({
      // center: true,
      padding: '2.2rem',
    }),
  ],
  options: {
    prefix: '',
    important: true,
    separator: ':',
  },

};

在.postcssrc.js接下来的内容中：

module.exports = {
  "plugins": [
    require('tailwindcss')('./tailwind-config.js'),
    require('autoprefixer')(),
  ]
};

最后在main.css文件中：

@tailwind base;

@tailwind components;

@tailwind utilities;

但是，每当编译发生时，我都会收到以下错误：

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Cannot find module 'tailwindcss/plugins/container'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)

我不知道怎么了，请帮忙解决问题。

提前致谢。

我想用 Tailwind 做这样的事情，

@/media screen and (max-width: 995px) , screen and (max-height: 700px) { ... }

是否可以？

我正在尝试使用 Tailwind CSS 实用程序类（不是普通 CSS）创建 Masonry 布局，但浏览所有官方 Tailwind 文档似乎框架已经提供了没有办法做到这一点。

Bootstrap 5 允许您做到这一点，但需要 JavaScript 库。 https://getbootstrap.com/docs/5.0/examples/masonry/

有没有一种方法可以使用 Tailwind CSS 来做到这一点，而无需使用任何额外的 JavaScript 库？

我是前端开发的新手，我尝试构建新的react-tailwindcss项目。我的项目抛出错误，例如“该类hover:不存在。如果hover:是自定义类，请确保它是在@layer指令中定义的。”，有什么想法吗？

全局.css：

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


@layer components {
.icon{
    @apply hidden xl:inline-flex p-2 h-10 w-10 bg-gray-200 rounded-full text-gray-700 
cursor-pointer hover: bg-gray-300; 
}

.inputIcon{
    @apply  flex items-center space-x-1 hover: bg-gray-100
    flex-grow justify-center p-2 rounded-xl cursor-pointer ;
}
}