Tailwind CSS 是一个实用程序优先的 CSS 框架,可以帮助开发人员快速轻松地构建自定义设计。使 Tailwind CSS 如此强大的原因之一是有大量的第三方工具和资源可以与之结合使用。在本文中,我们将了解一些最酷的 Tailwind CSS 工具。
用于 Tailwind-in-js 的 Twin.macro
twin.macro是一个允许您在 JavaScript 代码中使用这些样式的库。这个库的工作方式与样式化组件完全一样。
这是一个示例,说明您可以如何使用twin.macroReact 组件中的按钮样式:
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>;
}
切换到样式导入以添