标签: tailwind-css

我有一个 TailwindCSS 2.0 项目，并且安装了所有插件，包括 Typography 插件。当我创建一个 div class="prose" 时，我可以将任何标题、段落、列表等放入其中，并由 Typography 插件对其进行样式设置。

在我的项目中，我希望默认情况下散文类中的所有内容都是某种蓝色。我还希望链接是我在配置中定义的某种链接颜色。这些只是我想要进行的一些修改，以便默认的散文类可以按照我的风格对所有内容进行样式设置。我该如何去做？最佳实践是什么？

我想知道是否有一种策略可以仅使用 Tailwind 实用程序类而不编写任何 CSS 行来获取彩色项目符号列表点。
我花了一些时间进行搜索，但尚未找到任何解决方案。

这是我目前正在处理的清单。

<ul class='list-outside list-disc ml-6'>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
  <li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
  <li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

我正在使用 Angular 12 创建自定义库。在这个库中，我想使用 tailwindcss 来设计我的自定义组件。我将 tailwindcss 声明为对等依赖项，并在库文件夹的根目录中创建了 tailwinscss.config.js 文件，并将所有必需的模块导入到组件的 scss 文件中。不幸的是，顺风类没有加载。

然后我注意到，如果我导入库的应用程序也使用 tailwind 并使用库中也使用的任何类，则自定义组件的样式正确。

例如：我的自定义组件有 class bg-green-800。当我在应用程序中加载此组件时，它不会应用背景颜色。然后我在我的应用程序中创建一个元素并应用bg-green-800. 从现在开始，元素和自定义组件都显示正确的背景颜色。

有没有办法在自定义角度库中使用 tailwindcss？

我正在尝试Select与react-formstailwind css 和 tailwind 表单插件 ( @tailwindcss/forms) 集成。

仅使用顺风和反应选择，表单就可以正确呈现。但是，使用该插件后，会出现轮廓。我希望 tailwindcss 表单不干扰react-select样式。是否有有效的解决方案允许react-select样式覆盖 tailwind 插件？

此外，请告诉我是否有任何有效的解决方案可以在不求助于其他库（例如或 ）的情况下react-select使用样式化表单。tailwindemotionstyled-components

有没有办法在 2 秒内将bg-red-300其设置并淡出/转换为bg-transparent不同的 bg 类，或者我是否需要 javascript？我想要一个元素突出显示，然后在 2 秒后恢复正常。谢谢你！

我刚刚学习 React 和 Tailwind CSS，并在使用 Tailwind 类的 CSS 网格方面有过奇怪的经历。我已经为计算器制作了按钮，最后一个按钮跨越两列：

应用程序.js：

export default function App() {\n  return (\n    <div className="flex min-h-screen items-center justify-center bg-blue-400">\n      <Calculator />\n    </div>\n  );\n}\n

计算器.js

import { IoBackspaceOutline } from "react-icons/io5";\n\nexport const Calculator = () => {\n  return (\n    <div className="grid grid-cols-4 grid-rows-5 gap-2">\n      <Button>AC</Button>\n      <Button>\n        <IoBackspaceOutline size={26} />\n      </Button>\n      <Button>%</Button>\n      <Button>\xc3\xb7</Button>\n      <Button>7</Button>\n      <Button>8</Button>\n      <Button>9</Button>\n      <Button>x</Button>\n      <Button>4</Button>\n      <Button>5</Button>\n      <Button>6</Button>\n      <Button>-</Button>\n      <Button>1</Button>\n      <Button>2</Button>\n      <Button>3</Button>\n      <Button>+</Button>\n      <Button>0</Button>\n      <Button>.</Button>\n      <Button colSpan={2}>=</Button>\n    </div>\n  );\n};\n\nconst Button = ({ …

我有一个带有 tailwind 的项目和一个（正在进行中的）UI 库，我们希望逐步迁移到该库。

index.css我正在像这样导入样式

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


@import '@customPackage/ui-react/dist/style.css';

问题是，tailwind 基础导入了一些与我的 customPackage 样式冲突的样式：

.ak2yjgf是由customPackage css生成的样式，而是button, [type='button'], [type='reset'], [type='submit']由tailwind生成的样式。

我知道可以添加用于@layers base顺风的自定义样式，但这不会覆盖基本样式，它只是添加更多样式。我想知道是否有办法覆盖或删除仅base导入buttons。

有没有办法在顺风配置中定义不同的颜色，以便在没有选择器的情况下应用深色模式dark？

目前我有一个像这样的对象：

const colors = {
 light: {
    red: {
     100: "#880808",
    ...
    }
  },
 dark: {
    red: {
     100: "red",
    ...
    }
  },

} 

我只想使用red-100并自动映射颜色（仅通过bg-red-100）而无需指定bg-red-100 dark:bg-red-dark-100

我想知道是否有一种方法可以在 html 元素上的单个悬停实例上链接多个 tailwind css 类，而不是使用多个悬停实例。

例如而不是这个

<button class="hover:bg-blue-900 hover:text-white"></button>

你可以要这个还是别的东西

<button class="hover:bg-blue-900:text-white"></button>

我正在对 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 …