双生宏的力量
twin.macro是什么？
特征
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我将解释什么是 twin.macro，并向您展示 twin.macro 提供的所有功能。
twin.macro是什么？
这是一个库，它基本上将你的 TailwindCSS 类转换为 CSS 对象，并与 emotion 或 styled-components 共享，从而让你能够使用 Styled Components 进行编写。
特征
首先，我们需要知道 twin.macro 可以与 emotion 或 styled-component 一起使用。
支持
twin.macro适用于原生 JavaScript、React.js (CRA)、Gatsby 和 Next.js。Vue.js 目前仅提供实验版本。
插件
目前，twin.macro 支持某些插件，例如：
JSX元素属性
你可以将tw prop传递给 JSX 元素，如果你有一个没有很多类的元素，这是一种很好的方法。
/** @jsx jsx **/
import { jsx } from '@emotion/core';
import 'twin.macro';
export default function App() {
return (
<h1 tw="text-2xl text-blue-500 font-bold">Hello world</h1>
);
}
在 Emotion 中，将 JSX 导入到组件中非常重要，否则你的类会显示为[object object]，显然这不是我们想要的。
tw使用cssprop嵌套
在这种情况下，您可以将 de cssprop 传递给 JSX 元素以创建条件样式。
在这个例子中，我们有一个名为isBold 的变量，该属性会检查isBoldcss是否为真。如果为真，则该元素会带有相应的类名。font-bold
/** @jsx jsx **/
import { jsx } from '@emotion/core';
import tw from 'twin.macro';
export default function App() {
const isBold = true;
return (
<h1 css={[tw`text-3xl text-blue-500`, isBold && tw`font-bold`]}>Hello world</h1>
);
}
将 SASS 样式与css导入混合使用
通过css导入，我们可以将 SASS 风格与我们的 TailwindCSS 类混合使用。
/** @jsx jsx **/
import { jsx } from '@emotion/core';
import tw, { css } from 'twin.macro';
export default function App() {
const myCustomStyles = css`
${tw`font-bold`}
&:hover {
font-weight: 500;
${tw`text-black`}
}
`;
return (
<h1 css={[tw`text-3xl text-blue-500`, myCustomStyles]}>Hello world</h1>
);
}
样式组件
通过tw导入，我们可以创建一个样式组件，如果您有很多重复使用的元素，这将非常有用。
import React from 'react';
import tw from 'twin.macro';
const MyButton = tw.button`border-2 border-blue-500 px-4 py-2`;
export default function App() {
return (
<MyButton>Hello World!</MyButton>
);
}
或许，你想为样式化组件设置一个“基础”样式，你可以克隆并编辑现有的样式化组件。
import React, { Fragment } from 'react';
import tw from 'twin.macro';
const MyButton = tw.button`border-2 border-blue-500 px-4 py-2`;
const MyPrimaryButton = tw(MyButton)`text-white bg-blue-500`; // Cloned Styled Component
export default function App() {
return (
<Fragment>
<MyButton>Hello World!</MyButton>
<MyPrimaryButton>My Second Hello World!</MyPrimaryButton>
</Fragment>
);
}
样式化组件 - 条件样式
或许你需要一个条件样式，styled我们可以通过导入来实现。
import React from 'react';
import tw, { styled } from 'twin.macro';
const MyButton = styled.button(({isBold, isPrimary}) => [
tw`mt-5 ml-5 border-2 border-blue-500 px-4 py-2`,
// Ternary
isBold ? tw`font-bold` : tw`font-semibold`,
// Conditional Style
isPrimary && tw`text-white bg-blue-500`
]);
export default function App() {
return (
<MyButton isPrimary>Hello World!</MyButton>
);
}
在这个样式组件中，你可以创建条件样式，并将 props 传递给函数。在本例中，我们有两个 props：`isBold` 和 `isPrimary`。我们可以使用三元运算符，根据需要应用特定的类或样式。
变异组
twin.macro 的一项新改进是能够对类进行分组，我非常喜欢这个功能。
也许你正在进行响应式网页设计，或者在悬停伪类中使用多个类或样式。
因此，twin.macro 允许您将多个类组合在一起，例如，您的 Styled Component 中有以下类：
<h1 tw="text-blue-500 bg-blue-500 border-2 border-blue-500 hover:text-blue-900 hover:bg-blue-900 hover:border-blue-500" >Hello World</h1>
如果您不想重写hover:所有类的前缀，现在在 twin.macro 中您可以执行以下操作：
<h1 tw="text-blue-500 bg-blue-500 hover:(text-blue-900 bg-blue-900)">Hello World</h1>
你看到了吗？你只需要一个 hover:() 就可以添加多个样式，这些样式会对伪元素做出反应。
主题
如果您有自定义的 tailwind.config.js 文件，您可以使用themetwin.macro 中提供的导入功能来使用此文件中的自定义值。
twin.macro 仅使用tailwind.config.js 中提供的变量
theme。plugins
例子
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
electric: '#db00ff',
ribbon: '#0047ff'
}
}
},
plugins: []
}
所以，我们有了包含自定义变量的 tailwind.config.js 文件，要使用它，我们需要theme在应用程序中导入它。
// React.js App Example
/** @jsx jsx **/
import { jsx } from '@emotion/core';
import tw, { css, theme } from 'twin.macro'
const App = () => (
<div
css={[
tw`flex flex-col items-center justify-center h-screen`,
css({
// Grab values from your config with the theme import
background: `linear-gradient(
${theme`colors.electric`},
${theme`colors.ribbon`}
)`
})
]}
>
<h1>Hello World!</h1>
</div>
)
export default App;
因此，正如你所看到的，我们使用添加到 tailwind.config.js 中的自定义颜色创建了一个自定义线性渐变。${theme`color.electric`}
在某些情况下，您需要导入并使用jsx import 来为 emotion 使用 JSX 元素中的 CSS 属性。
/** @jsx jsx **/ import { jsx } from '@emotion/core';
你没发现错误吗？
也许你不记得你想要的 TailwindCSS 类了，它看起来像 ml-45 或 ml-73？
twin.macro 会提供一个有用的建议，如果你编写了错误的类，它会显示类似这样的信息：
✕ ml-7 was not found
Try one of these classes:
ml-0 [0] / ml-1 [0.25rem] / ml-2 [0.5rem] / ml-3 [0.75rem] / ml-4 [1rem] / ml-5 [1.25rem] / ml-6 [1.5rem]
ml-8 [2rem] / ml-10 [2.5rem] / ml-12 [3rem] / ml-16 [4rem] / ml-20 [5rem] / ml-24 [6rem] / ml-32 [8rem]
ml-40 [10rem] / ml-48 [12rem] / ml-56 [14rem] / ml-64 [16rem] / ml-auto [auto] / ml-px [1px]
为了帮助你记住并写出你需要的正确类。