适合所有人的 Juicy Tailwindcss 工具

Tailwind CSS 是一个实用优先的 CSS 框架，可以帮助开发者快速轻松地构建自定义设计。Tailwind CSS 如此强大的原因之一是它拥有丰富的第三方工具和资源可供配合使用。在本文中，我们将介绍一些最酷炫的 Tailwind CSS 工具。

Tailwind-in-js 的 Twin.macro

twin.macro是一个允许你在 JavaScript 代码中使用这些样式的库。该库的工作原理与 styled-components 完全相同。

以下是如何twin.macro在 React 组件中设置按钮样式的示例：

import tw from "twin.macro";

const StyledButton = tw.button`
  bg-blue-500
  hover:bg-blue-700
  text-white
  font-bold
  py-2
  px-4
  rounded
`;

function MyButton() {
  return <StyledButton>Click me!</StyledButton>;
}

切换到样式导入以添加条件样式：

import tw, { styled } from 'twin.macro'

const StyledInput = styled.input(({ hasBorder }) => [
  `color: black;`,
  hasBorder && tw`border-purple-500`,
])
const Input = () => <StyledInput hasBorder />

或者使用反引号来混合 sass 样式：

import tw, { styled } from 'twin.macro'

const StyledInput = styled.input`
  color: black;
  ${({ hasBorder }) => hasBorder && tw`border-purple-500`}
`
const Input = () => <StyledInput hasBorder />

逆风延伸

Headwind是一款适用于 Visual Studio Code 的Tailwind CSS类名排序器。我们都知道，实用框架会附带一长串的类名。此扩展程序会强制对类名进行一致的排序，并在保存时自动删除任何意外重复的类名。

例如，没有headwind：

<div className="w-24 bg-yellow-400 font-bold text-3xl flex justify-center">
Headwind sorter
</div>

和headwind：

<div className="flex justify-center w-24 text-3xl font-bold bg-yellow-400">
Headwind sorter
</div

Tailwind 文档扩展

此 VS 扩展可让您从 VSCode 内部快速访问 Tailwind 文档页面。

动图

Tailwind CSS 调试屏幕

Tailwind CSS Debug Screens是一个插件，它显示当前活动的屏幕，如、、sm等（响应式断点）。mdlg

看左下角。

Tailwindcss 品​​牌颜色

Tailwindcss Brand Colors是 Tailwind CSS 框架的一个插件，可让您轻松地将流行品牌调色板中的颜色添加到您的项目中。

例如，您可以使用该类text-twitter将 Twitter 蓝色应用于某些文本，或者使用该类将bg-github元素的背景颜色设置为 GitHub 蓝色。

<h1 class="text-twitter">This text will be Twitter blue</h1>
<p class="bg-github text-white p-4">
 This paragraph will have a GitHub blue background and white text
</p>

尾块

Tailblock是一个预先设计的 UI 元素块，使用框架的实用类进行样式设置，可以轻松放入项目中，从而节省时间并减少对自定义 CSS 的需求。这些元素块包含常见的 UI 模式，例如导航栏、按钮、表单和其他界面元素。

如何使用

1. 前往尾部障碍物
2. 挑选一个你喜欢的方块。

1. 单击“<>查看代码”按钮。
2. 复制代码。
3. 将其粘贴到 html 文档中
4. 使用任意数量的块重复该过程👍。

除了Tailwind Blocks之外，还有一个名为Tailwind Toolbox的工具，其工作原理与 Tailwind 基本相同。Tailwind Toolbox也是一个预构建的、可自定义的模板和组件的集合，可以作为新项目的起点。

渐变设计师

我们都知道，用 CSS 制作渐变色非常困难，而使用 Tailwinds 工具类则更加复杂。渐变设计器是一款工具，允许用户创建和自定义渐变，用于网页设计和其他视觉媒体。该工具会生成渐变对应的 CSS 和 Tailwind 代码，您可以将其复制粘贴到网页设计项目中。

转换

Transform是一个工具，允许用户将 CSS 样式转换为实用程序类，以便与 Tailwind CSS 框架一起使用。

结论

感谢大家从头到尾阅读这篇文章。希望你们喜欢这些工具，并且今天发现了一些新东西，并能用它们来提升你的工作效率。下篇文章再见😊。