标签: tailwind-css

Tailwind@tailwind在规则中添加了css,标记为未知.我怎样才能避免这个错误？

例如 styles.css

@tailwind preflight;

@tailwind utilities;

刚开始用https://tailwindcss.com

并且无法弄清楚如何仅使用顺风类对像素完美设计进行编码。简单的例子，我需要 padding-left 22px，但最接近的顺风类是 pl-6 和 pl-8，分别是 24px 和 32px。因此，在一天结束时，我有一堆顺风类 + 1 个自定义，我在其中进行了安排，这违背了该框架“实用程序优先”的目的。

我不明白为什么顺风的响应覆盖在我的项目中不起作用。

例如，我希望 div 中的以下文本在小屏幕断点下方居中，并在 sm 断点上方左对齐。当我在Codepen中尝试时，以下代码似乎可以工作。然而，它在我的 laravel 项目中不起作用。

<div class="text-grey-4 flex-1 px-6 sm:text-left text-center self-center">  
    <h2 class="h2"><b>Heading Text</b></h2>
    <div>
      Lorum ipsum lorum ispum lorum ipsum Lorum ipsum lorum ispum lorum ipsum Lorum ipsum lorum ispum lorum ipsum
    </div>
 </div>

有什么想法为什么这在我的 Laravel 项目中不起作用吗？

我正在尝试在 Next.js 项目中使用 Tailwind CSS，但我无法将 Tailwind 类与 Next.js Image 组件一起使用。

这是我的代码：

<Image
    src={img.img}
    alt="Picture of the author"
    width="200"
    height="200"
    className="bg-mint text-mint fill-current"
></Image>

我想使用 Tailwind 类而不是Next.js 图像的heightandwidth属性。但我不能，因为它给我一个错误。此外，unsizedproperty 会引发另一个错误，指出它已被弃用。有什么解决办法吗？

如果我不使用heightandwidth属性，这里是错误。

当我使用该layout='fill'属性时，它只显示一张图片。如果我使用该unsized属性，则会显示以下错误。

我是 tailwindcss 的新手。但我这里有一个问题。

查看屏幕截图，背景颜色未应用于导航栏中。此外，整个 html 正文在中小屏幕上并没有获得全宽。

我不明白的是，我仍然没有使用 tailwindcss 中的任何响应类，如 md、sm 或 lg。但宽度存在严重问题，我尝试使用 w-full 和 w-screen 的顺风类。它们都不起作用。这是问题的截图

您可以在这里找到代码：https ://codesandbox.io/s/focused-curran-jdyup

提前致谢。

编辑：

好的，看看这个 GIF，伙计们。

我正在尝试在 Tailwind Play 中重现该问题。但我不能。然后我注意到同一行代码在 Tailwind Play 中完美运行，但在 nextjs 中却不起作用。我不知道这里的问题是什么，但我在下面分享了 Tailwind Play 和 NextJS 代码。顺风玩法：

<div class="flex justify-between items-center p-5 bg-indigo-800 text-white">
      <div class="ml-16">
        <div class="flex items-center">
          <div class="">
            <h4 class="tracking-widest uppercase">GrayScale</h4>
          </div>
          <div class="lg:hidden">
            <button
              type="button"
              class="text-gray-400 mt-1 hover:text-white focus:text-white focus:outline-none"
            >
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2" …

我正在对 typescript 和 tailwindcss 做出反应。

我想要的是，不是在主tailwind.css文件（包含 @tailwind base、@tailwind 组件等的文件）中使用@apply指令，我想在任何 .scss 文件中使用它。

例如，每当我创建一个组件时，我都会创建一个文件夹，并在其中创建一个 index.tsx 文件和一个 .scss 文件。我想在该 .scss 文件中使用 @apply 指令。这样，工作和调试将很容易，因为两个关联的文件都在同一个文件夹中。我怎样才能做到这一点？

我在下面展示了我的基本文件夹结构。

文件夹结构：

src > 组件 > 标题 > Header.tsx

import React from "react";
import styles from "./Header.module.scss";

interface Props {}

const Header: React.FC<Props> = (props) => {
  return <div className={styles.headerTag}>Header part here</div>;
};

export default Header;

src > 组件 > Header > Header.module.scss

// what to import so that I can use tailwind like …

构建 Vite2 应用程序。

试图导入一个ESModulein tailwind.config.js. 该模块的导出方式如下：

export default xxx;

然后我导入了该模块，如下tailwind.config.js所示：

const xx = require('./xx/xxx');

但我收到一个错误：

[plugin:vite:css] Cannot use import statement outside a module

我该如何解决？

我正在尝试用 Tailwind CSS 构建我的故事书。运行时，build-storybook组件将使用 tailwind 类呈现。不幸的是，当我构建故事书并运行创建构建时storybook-static，npx http-server storybook-static类不会加载到故事中，并且组件不会显示样式。

这是我的项目的重现仓库： https ://gitlab.com/ens.evelyn.development/storybook-issue

这是我的main.js：

    const path = require('path')

module.exports = {
  "stories": [
    "../src/components/**/**/*.stories.mdx",
    "../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },        
   "@storybook/addon-actions",
    "storybook-tailwind-dark-mode"
  ]}

我的项目结构如下所示：

.storybook 
src
  components 
     subdir
       Button
         index.tsx
         button.stories.js 
  styles
    index.css (<-- tailwindcss file)

非常感谢任何提示或建议。

我在y轴上有一个溢出 div，并希望它恰好是屏幕高度的 80%。现在我的这个<div class="overflow-y-auto h-96">可以工作了，但是高度必须大于 96，恰好是整个屏幕的 80%（为页眉和页脚留出空间）。

使用起来h-4/5好像不行。

    <div class="h-4/5 bg-yellow-200 overflow-hidden">
        <div class="overflow-y-auto bg-yellow-500 space-y-3">
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            </div>
        </div>
    </div>

更新：我得到了这个（也可以在这里https://play.tai​​lwindcss.com/NlZdzWfkyD）但是如果我取消注释顶栏它会失败，请问，有什么想法吗？

<div class="h-screen">
  <div class="h-full">
    <!--<div class="bg-blue-400 py-3">topbar</div>-->

    <div class="pl-6 pr-16 pt-12 h-full">
      <div class="h-full border border-gray-200 rounded-t-xl px-20 pt-3 flex …

我正在尝试制作一个反应组件来更改参数的宽度，但它不起作用，我不知道为什么。

function Bar() {
    
    const p =80

    const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]`

    console.log(style)

    return (
        <div className=' h-8 w-full'>
            <div className={`bg-slate-500 h-8 w-[${p}%]`}>
            </div>
        </div>
    )
}
export default Bar

通过这段代码，我得到了一个全尺寸的条，但如果我使用 80.0 的严格字符串，它就可以正常工作