Next.jsでMaterial UIとTailwind CSSを併用する時のメモ

4141 ワード
next.js React material-ui tailwindcss React テキストリンク

Material UIとTailwind CSSは事前に導入されている前提です。
StorybookとTailwind CSSを併用する場合、ちょっと設定が必要なのでメモ

Storybookに@storybook/addon-postcssを導入しないとyarn storybook実行時にエラーがでてしまいます。
StorybookとTailwindでPostCSSが競合？してしまうことが原因みたいです。(よくわかっていない)

addon-postcssを導入
yarn add -D @storybook/addon-postcss
.storybook/main.js
module.exports = {
  addons: [
    // 追加
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
};

Material UIのコンポーネントにclassName属性にTailwind CSSのクラスを指定すると、既存のスタイルを上書きします。

tailwind.config.js
module.exports = {
  variants: {
    extend: {},
  },
  plugins: [],
+ important: true, //追加
}
test.tsx
<Button variant="contained" className="bg-blue-500 hover:cursor-pointer hover:bg-blue-600"></Button>

StorybookもでTailwindのスタイルが反映するようにする

.storybook/preview.js
// 追加
import '../styles/globals.css';
globals.css
@tailwind base; // 追加
@tailwind components; // 追加
@tailwind utilities; // 追加