Zenn
🐾

【自分用メモ】TailwindCSSとMantineの導入

2022/08/11に公開
mantine
idea

Next.jsプロジェクトへのTailwindCSSとMantineの導入

1.TailwindCSSのインストール

  1. ターミナルで以下のコマンドを実行する
yarn add -D tailwindcss postcss autoprefixer

npx tailwindcss init -p
  1. tailwind.config.jsファイルを設定する
tailwind.config.js
/** @type {import('tailwindcss').Config} */ 
module.exports = {
  mode: "jit",
  content: [
    "src/pages/**/*.{js,ts,jsx,tsx}",
    "src/component/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. global.cssに以下を追加する
    リセットCSSがMantineと競合するため@tailwind baseは入れない
globals.css
@tailwind components;
@tailwind utilities;
  1. ターミナルでyarn devする

2.Mantineのインストール

必要なパッケージを選んでインストールする

yarn add @mantine/core @mantine/hooks @mantine/next @emotion/server @emotion/react

3.TailwindCSSのレスポンシブ設定をMantineにあわせる

tailwind.config.js
theme: {
    screen: {
      xs: "576px",
      sm: "768px",
      md: "992px",
      lg: "1200px",
      xl: "1400px",
    },
}

4.Mantineで使うアイコンを追加する

yarn add @tabler/icons --save

Discussion