React Daisyuiで画面幅によってデザインを切り替える方法

module.exports = {
  theme: {
    extend: {
      screens: {
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
      },
    },
  },
  variants: {},
  plugins: [],
}

import React from 'react';
import { classes } from 'react-dom';
import 'tailwindcss/tailwind.css';

const MyComponent = () => {
  return (
    <div className={classes('sm:hidden', 'md:block')}>
      {/* この要素は画面幅がmd以上の場合に表示されます */}
    </div>
  );
}

1. まず、react-daisyuiパッケージをインストールします。

npm install react-daisyui

2. 必要なコンポーネントをimportします。

import { Button } from 'react-daisyui'

3. 画面幅に応じてデザインが切り替わるようにクラス名やスタイルを指定します。以下は画面幅がmd以上の場合にボタンが表示される例です。

const MyComponent = () => {
  return (
    <div className="md:flex">
      <Button>ボタン</Button>
    </div>
  );
}

const MyComponent = () => {
  const buttonStyle = {
    display: 'none',
    '@media (min-width: 768px)': {
      display: 'block',
    },
  };

  return (
    <div>
      <Button style={buttonStyle}>ボタン</Button>
    </div>
  );
}