标签: tailwind-css

我想让这样的事情成为可能：

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme="bg-gray-100 text-gray-800 ..."
   class:darkTheme="bg-blue-900 ..."
>
...
</div>

因此，将始终应用一组类。一组仅当whiteTheme为真时，另一组仅当darkTheme为真时。

我知道我可以定义一个whiteTheme和一个darkThemecss 类并让它像那样工作

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme
   class:darkTheme
>

但关键是我想单独设计每个元素（尤其是在我的应用程序的开始阶段）。并且必须为不同类中的每个元素定义我的一组类......对我来说，使用 Tailwind.css 和对特定元素进行试验的目的（无需在 css 定义和元素定义之间来回跳转）。

我可以选择的另一种方式是：

<div 
   class="overflow-scroll h-screen antialiased ... {whiteTheme?'bg-gray-100 text-gray-800 ...':'bg-blue-900 ...'}">

这没什么，但我很想通过在单独的属性中定义事物来提高可读性和可维护性......

所以我想知道是否有办法让它按照我想要的方式工作......例如，我可以轻松扩展 Svelte 编译器吗？

最好的约翰内斯

我试图在通过 PurgeCSS 处理时保留所有 TailwindCSS 颜色类（即 bg-green、bg-red、text-green、text-red）。这些颜色类是在 CMS 中设置的，而不是在代码中设置的，因此我们无法搜索它们的代码，因为它们（全部）不存在于此处。

因此，我想使用PurgeCSS的白名单功能来保留所有以 'bg-' 或 'text-' 开头的类。但是，我下面的模式似乎并没有奏效？任何想法如何调整它？

whitelistPatterns: ['^bg\-', '^text\-'],

我克隆了这个 repo https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs然后我更新了tailwind.config.js

  theme: {
    extend: {
      color: {
        primary: "#730000",
        secondry: "#efefef",
      },
    },
  },
  variants: {},
  plugins: [],
};

然后运行命令postcss css/tailwind.css -o generated.css 终端会引发错误TypeError: Invalid PostCSS Plugin found at: plugins[0] ，任何人都可以帮我修复它。谢谢你。

我只是在尝试使用 tailwindcss，我陷入了非常基本的事情。我尝试了不同的tailwindcss 的实用程序分类并且它起作用了。但现在我被困在边框颜色

<div className="px-4 border-gray-900 border-solid">
   <a href="#" className="block font-semibold">Menu1</a>
   <a href="#" className="block ">Menu2</a>
   <a href="#" className="block ">Menu3</a>
   <a href="#" className="block ">Login</a>
</div>

我可以检查元素，它在检查元素中交叉，这意味着它没有被应用于 dom。

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        negative: 'var(--color-negative)',
        positive: 'var(--color-positive)',
        'primary-background': 'var(--background-primary)',
        'sec-background': 'var(--background-sec)',
        'primary-text': 'var(--color-text-primary)',
      },
    },
    backgroundColor: (theme) => ({
      ...theme('colors'),
    }),
    borderColor: (theme) => ({
      ...theme('colors'),
    }),
  },
  variants: {
    backgroundColor: ['active'],
    borderStyle: ['responsive'],
  },
  plugins: [],
};

这是我的 tailwind.config.js 的样子

附加图像

我正在创建一个可重用的组件按钮，我想将两个 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 部分。

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