Twin.macro 样式属性使用指南：从基础到高级实践-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00638/article/details/148441519

Twin.macro 样式属性使用指南：从基础到高级实践

twin.macro 🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time. 项目地址: https://gitcode.com/gh_mirrors/tw/twin.macro

前言

Twin.macro 是一个强大的工具，它允许开发者在 React 组件中直接使用 Tailwind CSS 的类名语法，同时保留了 CSS-in-JS 的动态特性。本文将全面介绍 Twin.macro 的各种样式属性使用方法，帮助开发者高效地编写组件样式。

基础样式应用

使用 tw 属性

最基础的样式应用方式是使用 tw 属性，这类似于直接在元素上使用 Tailwind 类名：

import 'twin.macro'

const BasicComponent = () => (
  <div tw="flex w-full">
    <div tw="w-1/2"></div>
    <div tw="w-1/2"></div>
  </div>
)

关键点：

适用于不需要条件判断的简单样式
只需从 twin.macro 导入任意内容即可激活 tw 属性
语法与原生 Tailwind 完全一致，学习成本低

条件样式处理

使用 css 属性实现条件样式

当需要根据组件 props 或状态动态改变样式时，可以使用 css 属性配合数组语法：

import tw from 'twin.macro'

const ConditionalComponent = ({ hasBg }) => (
  <div
    css={[
      tw`flex w-full`, // 基础样式
      hasBg && tw`bg-black`, // 条件样式
    ]}
  >
    <div tw="w-1/2" />
    <div tw="w-1/2" />
  </div>
)

最佳实践：

将基础样式放在数组首位
条件样式放在后面，使用逻辑运算符控制
每个样式占一行，保持可读性

TypeScript 支持：

import tw from 'twin.macro'

interface ComponentProps {
  hasBg?: boolean
}

const TypedComponent = ({ hasBg }: ComponentProps) => (
  <div
    css={[
      tw`flex w-full`,
      hasBg && tw`bg-black`,
    ]}
  >
    {/* ... */}
  </div>
)

样式覆盖机制

Twin.macro 提供了清晰的样式覆盖顺序：

import tw from 'twin.macro'

const OverrideComponent = () => (
  <div css={tw`text-white`} tw="text-black">
    {/* 最终文字颜色为 black，因为 tw 属性会覆盖 css 属性中的样式 */}
    文字将显示为黑色
  </div>
)

样式优先级规则：

css 属性中的基础样式
css 属性中的条件样式
tw 属性中的样式（最高优先级）

保持 JSX 整洁

当样式变得复杂时，推荐将样式抽离到单独的对象中：

import tw from 'twin.macro'

const styles = {
  container: ({ hasBg }) => [
    tw`flex w-full`,
    hasBg && tw`bg-black`,
  ],
  column: tw`w-1/2`,
}

const CleanComponent = ({ hasBg }) => (
  <section css={styles.container({ hasBg })}>
    <div css={styles.column} />
    <div css={styles.column} />
  </section>
)

优点：

JSX 结构更加清晰
样式逻辑集中管理
便于复用和维护

多值变体处理

对于有多种状态的组件（如 light/dark 主题），可以使用对象映射方式：

import tw from 'twin.macro'

const containerVariants = {
  light: tw`bg-white text-black`,
  dark: tw`bg-black text-white`,
  accent: tw`bg-yellow-500 text-red-500`,
}

const VariantComponent = ({ variant = 'dark' }) => (
  <section css={[tw`flex w-full`, containerVariants[variant]]}>
    {/* ... */}
  </section>
)

TypeScript 增强：

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

type VariantType = 'light' | 'dark' | 'accent'

const typedVariants: Record<VariantType, TwStyle> = {
  light: tw`bg-white text-black`,
  dark: tw`bg-black text-white`,
  accent: tw`bg-yellow-500 text-red-500`,
}

动态值处理方案

由于 Babel 限制，Tailwind 类名不能直接插值，但有多种替代方案：

方案1：预定义样式对象

import tw from 'twin.macro'

const spacingStyles = { sm: tw`mt-2`, lg: tw`mt-4` }

const DynamicComponent = ({ size = 'sm' }) => (
  <div css={spacingStyles[size]} />
)

方案2：使用 theme 辅助函数

import { theme } from 'twin.macro'

const spacingValues = { sm: theme`spacing.2`, lg: theme`spacing.4` }

const ThemeComponent = ({ size = 'sm' }) => (
  <div css={{ marginTop: spacingValues[size] }} />
)

方案3：原生 CSS 方案

const FallbackComponent = ({ width = 5 }) => (
  <div css={{ maxWidth: `${width}rem` }} />
)

自定义选择器

使用方括号语法实现复杂选择器：

import tw from 'twin.macro'

const customSelectors = tw`
  bg-black
  [> i]:block
  [> span]:(text-blue-500 w-10)
`

const SelectorComponent = () => (
  <button css={customSelectors}>
    <i>图标</i>
    <span>标签</span>
  </button>
)

常见应用场景：

主题切换：[.dark-theme &]:(bg-black text-white)
组状态：[.group:disabled &]:text-gray-500
媒体查询：[@media (min-height: 800px)]:hidden

自定义值与高级 CSS

自定义值语法

<div tw="top-[calc(100vh - 2rem)]" />

复杂 CSS 处理

import tw, { css, theme } from 'twin.macro'

const AdvancedComponent = () => (
  <input
    css={[
      tw`text-blue-500 border-2`,
      css({
        WebkitTapHighlightColor: 'transparent',
        backgroundColor: theme`colors.red.500`,
        '&::selection': tw`text-purple-500',
      }),
    ]}
  />
)