Вот несколько способов создания повторно используемого компонента в React с помощью Tailwind CSS:

1. Функциональные компоненты: создайте функциональный компонент, используя синтаксис функций React, и примените CSS-классы Tailwind непосредственно в JSX-коде компонента.

import React from 'react';
const MyComponent = () => {
  return (
    <div className="bg-blue-500 text-white p-4">
      This is a reusable component with Tailwind CSS styles.
    </div>
  );
}
export default MyComponent;

2. Модули CSS: используйте модули CSS для локального применения стилей CSS к вашему компоненту. Этот подход позволяет вам писать CSS-классы Tailwind как обычные имена классов в вашем коде JSX.

import React from 'react';
import styles from './MyComponent.module.css';
const MyComponent = () => {
  return (
    <div className={`${styles.container} ${styles.bgBlue} ${styles.textWhite} ${styles.p4}`}>
      This is a reusable component with Tailwind CSS styles.
    </div>
  );
}
export default MyComponent;

3. Компонент высшего порядка (HOC). Создайте компонент более высокого порядка, который обертывает ваш компонент и применяет необходимые классы CSS Tailwind.

import React from 'react';
const withTailwindStyles = (WrappedComponent) => {
  return () => (
    <div className="bg-blue-500 text-white p-4">
      <WrappedComponent />
    </div>
  );
}
export default withTailwindStyles;

4. Библиотеки CSS-in-JS: используйте библиотеки CSS-in-JS, такие как styled-comments или Emotion, для создания повторно используемых компонентов с помощью стилей CSS Tailwind. Эти библиотеки позволяют определять стили компонентов с помощью JavaScript.

import React from 'react';
import styled from 'styled-components';
const StyledDiv = styled.div`
  background-color: #3b82f6;
  color: #ffffff;
  padding: 1rem;
`;
const MyComponent = () => {
  return (
    <StyledDiv>
      This is a reusable component with Tailwind CSS styles.
    </StyledDiv>
  );
}
export default MyComponent;