在React中重用Tailwind组件的简单方法

Question

我在react中使用Tailwind CSS。我想知道如何以简单的方式重用tailwind按钮样式，以及在文件中将组件保存在哪里。

我在React中使用Tailwind CSS。我想以简单的方式重用Tailwind按钮样式，并且需要知道在哪里把这个组件存放在文件中。

   export default function App() {
      return (
        <div className="App">
            <button
              // className='btn-indigo'
              className="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
            >
              Button1
            </button>

            <button
              // className='btn-indigo'
              className="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
            >
              Button2
            </button>
      }

- somniumm

Answer 1

我分享了我使用TypeScript的一种实现。

你可以得到如何使用tailwind重复使用任何组件的想法。 实现、命名和路径通常具有个人观点。

// src/components/atoms/Button.tsx
import {DefaultComponent} from '$types/common';
import {NoopFn, classNames} from '@utils';
import {ReactElement} from 'react';

type ButtonUse = `primary` | `secondary` | `destructive`;
type ButtonSize = `xs` | `sm` | `md`;
type ButtonType = `button` | `submit`;

type ButtonProps = DefaultComponent & {
  size?: ButtonSize;
  type?: ButtonType;
  use?: ButtonUse;
};

const BUTTON_SIZE: {[key in ButtonSize]: string} = {
  md: `text-base px-4 py-2`,
  sm: `text-sm px-3 py-2 leading-4`,
  xs: `text-xs px-2.5 py-1.5`,
};

const BUTTON_COLOR: {[key in ButtonUse]: string} = {
  destructive: `text-white bg-red-600 hover:bg-red-700`,
  primary: `text-white bg-indigo-600 hover:bg-indigo-700`,
  secondary: ``,
};

export const Button = (props: ButtonProps): ReactElement => {
  const {
    className = ``,
    children,
    use = `primary`,
    size = `xs`,
    type = `button`,
    onClick = NoopFn,
  } = props;
  return (
    <button
      {...{onClick, type}}
      className={classNames(
        `inline-flex items-center border border-transparent font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 justify-center`,
        BUTTON_SIZE[size],
        BUTTON_COLOR[use],
        className,
      )}>
      {children}
    </button>
  );
};

- Dennis Vash

Answer 2

您可以使用 @apply 指令：

// do this in your CSS file

.my-btn {
  @apply py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75;
}

然后在你的JSX代码中：

<button className="my-btn">Foo</button>

此外，您可以创建一个简单的组件文件：

---

// src/components/MyButton.jsx

const MyButton = ({ children }) => <button className="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">{children}</button>

export default MyButton

在您的应用程序文件中：

import MyButton from './components/MyButton'

// ...

<MyButton>foo</MyButton>
<MyButton>bar</MyButton>

如果您想要传递其他props，您将需要修改MyButton。不过，我建议使用CSS-in-JS库，例如styled-components或Emotion。还有一些特定于Tailwind的替代方案，可能会引起您的兴趣：twin.macro、Twind和xwind。

---

最简单的方法是将类存储在字符串中。

const myBtn = "py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"

// ...

<button className={`${myBtn} some-other-class-specific-to-foo`}>Foo</button>
<button className={myBtn}>Bar</button>

您还可以使用类库，例如 classnames 和 clsx 来组合字符串。

- brc-dd

---

由于某些原因，我的代码在第41行无法正常工作。https://codesandbox.io/s/nostalgic-roman-l69mv?file=/src/App.js - somniumm

@somniumm，你还没有在其中配置postcss，而且它应该是className="my-btn"而不是className=".my-btn"。请参阅：https://tailwindcss.com/docs/guides/create-react-app - brc-dd

谢谢！我在 Codesandbox 中配置 Tailwind 完全不知所措。 - somniumm

哈哈哈，解决方案3再怎么hacky都不行了。 - somniumm

我可以看到方案2和3是可行的。但我认为方案1可能更标准化，而且更容易进行小的定制。你能否看看我是否还有其他遗漏的地方？我按照教程操作，但仍然无法让Tailwind正常工作。https://codesandbox.io/s/nostalgic-roman-l69mv?file=/src/App.js - somniumm

@somniumm https://codesandbox.io/s/boxbf - brc-dd

Answer 3

使用Tailwind和classnames

import classNames from "classnames";
function Button({
  children,
  primary,
  outline,
  round,
  // rest will specially good for event handlers mouseover, onclick. 
  ...rest
}) {
  const fullClasses = classNames(
    // you can also pass down specific props, size, border etc
    rest.className,
    "flex items-center px-3 py-1.5 border",
    {
      // in js object key names cannot have "-" so we write inside string
      // if we pass "primary" prop, this value will be evaluated "truthy" so thie key "border-blue-500 bg-blue-500 text-white" will be added to fullClasses
      // if you do not pass primary this key class will not be added
      "border-blue-800 bg-blue-800 text-white": primary,
      "rounded-full": round,
      // later className will override the earlier one. if outline is true earlier bg will be ignored
      "bg-white": outline,
      "text-blue-600": outline && primary,        
    }
  );
  return (
    <button {...rest} className={fullClasses}>
      {children}
    </button>
  );
}

- Yilmaz