标签: tailwind-css

我想通过向特定项目添加隐藏的 sm:flex 来使我的导航栏具有响应能力。这意味着它默认会隐藏，但仅在小屏幕及以上屏幕上显示。我做了一些调试，发现隐藏覆盖了所有内容，甚至是响应式变体。其他显示属性适用于响应式变体。这是我的代码：

className="hidden sm:flex sm:w-2/5 w-11/12 mt-4 sm:mt-0 items-center shadow-md"

我正在尝试安装tailwindcss并在全新的CRA 2.0（特别是2.1.2）中使用打字稿。

我无法在没有CRA覆盖的情况下覆盖“ isolatedModules”：true标志。

我尝试通过从modules.export更改导出样式并将配置强制为false而不是删除它来解决此问题。我读到，您还可以创建一个单独的tsconfig.json，扩展您的旧tsconfig.json并覆盖那里的更改，但这似乎很麻烦。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "preserve",
    "isolatedModules": true
  },
  "include": [
    "src",
    "postcss.config.js"
  ]
}

postcss.config.json

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

这是我的npm开始吐出来的东西

The following changes are being made to your tsconfig.json file:
  - compilerOptions.isolatedModules must be true (implementation limitation)

我可以看到我的应用程序可以编译，工作，然后绘制到页面上，然后将其替换为显示错误的红色错误框

Type …

我正在努力让 Tailwind CSS 与 SASS 和 Webpack 一起工作。似乎 tailwind 的 postcss 配置在处理方面并没有真正做任何事情@tailwind preflight，@tailwind components并且@tailwind utilities

我的设置如下：

布局.scss

@import "~tailwindcss/preflight.css";
@import "~tailwindcss/components.css";

.my-class {
    @apply text-blue;    
    @apply border-red;
}

@import "~tailwindcss/utilities.css";

入口.js

import '../css/src/layout.scss';

postcss.config.js

const tailwindcss = require('tailwindcss');
const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        cssnano({
            preset: 'default',
        }),
        purgecss({
            content: ['./views/**/*.cshtml']
        }),
        autoprefixer
    ]
 }

webpack.config.js

// NPM plugins
const autoprefixer = require('autoprefixer'); …

我注意到 Tailwindcss 中的 :hover 使用默认的悬停选择器，这会导致移动设备上的“卡住”悬停状态。有没有办法修改 :hover 函数来执行 @media(hover:hover) ？

我正在创建一个可重用的组件按钮，我想将两个 Tailwind 类作为道具传递给该按钮并动态使用它们。

这是我的组件：

function Button({ primary, secondry, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={`bg-${primary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 border-${primary} hover:bg-${secondry} hover:text-${primary} cursor-pointer duration-300`}
    >
      {label}
    </button>
  );
}

这就是我使用该组件的方式：

<Button
label={"Cancel"}
primary="red-700"
secondry="zinc-900"
onClick={(e) => navigate("/customers")}
/>

然而，这些课程并未被应用。它看起来是这样的：

所以我使用 flowbite 和 tailwind css 来开发我的 React 应用程序。我遵循了他们的网站中提到的所有标准安装程序，以使用 React 设置 Flowbite，请在此处参考文档： https: //flowbite.com/docs/getting-started/react/

因此，在完成基本设置过程后，我的 tailwind 文件如下所示：

module.exports = {\n    content: [\'./src/**/*.{js,jsx,ts,tsx}\', \'./node_modules/flowbite/**/*.js\'],\n    theme: {\n        extend: {},\n    },\n    plugins: [require(\'flowbite/plugin\')],\n}\n    \n

当我需要 Flowbite 插件时，我不断收到的错误是：

    > Could not find a declaration file for module \'flowbite/plugin\'.\n    > \'C:/dev/flowbite-test/node_modules/flowbite/plugin.js\' implicitly has\n    > an \'any\' type.   Try `npm i --save-dev @types/flowbite` if it exists\n    > or add a new declaration (.d.ts) file containing `declare module\n    > \'flowbite/plugin\';`\n    \n

这里还有我的 app.js …

您好，我有一个问题如何在顺风网格中使用重复和最小最大。我做了类似的事情，但没有成功。

const DetailedAssetCard = () => {
  return (
    <div className=" bg-gray-100 rounded-lg grid  grid-cols-[repeat(4, minmax(100px, 500px))]  ">
      <div className="w-32 h-32 rounded-full ">
        <Image src={Btc} alt="" />
      </div>

      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
    </div>
  );
};

是否可以在顺风配置中使颜色动态化。

我想通过 api 从后端接收所需的颜色（主要、重音） 。

因此用户可以从管理面板更改颜色。

我想从 api 获取这个十六进制值

我有一个Laravel 9项目，我想使用Tailwind

当我将每个component文件放入css某些文件中以将它们分开时，它会导致错误消息，但如果我将所有文件放在一起就可以了。

Error message:

@layer components使用了body.css但不@tailwind components存在匹配的指令。

app.css:

 @import "tailwind.css";

 @import "body.css";

tailwind.css:

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

body.css:

@layer components {
    .body {
        @apply bg-sky-100
    }
}

webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
        // require('postcss-import'),
        require("tailwindcss/nesting"),
        require('autoprefixer'),
    ])
    .webpackConfig({
        stats: {
            children: true,
        },
    })
    ;

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
    ],
    theme: {
        extend: …

我有一个 Laravel 8 项目，使用 PHP7，想尝试一下 Laravel Breeze，但是根据 Laravel 文档安装后，Tailwind 样式没有反映在我的登录和注册页面上。

页面顶部有一个损坏的脚本加载 @vite('resources/css/app.css', 'resources/js/app.js')

我检查了 app.blade.php 和 guest.blade 并发现 @vite('resources/css/app.css', 'resources/js/app.js') 正在加载到 head 部分。

这里缺少什么？我需要不同的配置来编译我的资产吗？