makeUseStyles.js

import { useMemo } from 'react';

export const makeUseStyles = cb => (...args) => {
  const styleObj = useMemo(() => cb(...args), args);

  const styleSheet = useMemo(() => {
    return Object.entries(styleObj).reduce((acc, [className, classes]) => {
      acc[className] = classes.join(' ');

      return acc;
    }, {});
  }, [styleObj]);

  return styleSheet;
};

tailwind-react-hooks.js

import React from 'react';
import { makeUseStyles } from '../styles/makeUseStyles';

const useStyles = makeUseStyles(() => ({
  container: ['h-full'],
  title: ['font-black'],
}));

export const Layout = ({ children }) => {
  const styles = useStyles();

  return (
    <div className={styles.container}>
      <header>
        <h1 className={styles.title}>Hello World</h1>
      </header>

      {children}
    </div>
  );
};