はじめに
Material Tailwindを最近使用しているのですが、インストール時にTailwind CSSの公式サイトを見てインストール後、Material Tailwindの公式サイトを見てインストールという手順を踏んでいます。
IDEはVSCodeを想定しています。
インストールのたびに各公式サイトを訪れるのは手間なので、自分用に手順をまとめておきます。
手順は公式サイトを確認すれば全て記載されているものです。
Tailwind CSSインストール
下記コマンドでインストール
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
インストール後、生成されたtailwind.config.jsを編集
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
theme: {
extend: {},
},
plugins: [],
}
index.cssに下記を追加
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
VSCodeで@tailwindの箇所で警告がでてしまうので、設定を行い解消します。
下記拡張機能をインストールします。
その後、下記記述をsetting.jsonやdevcontainer.jsonに追加します。
"files.associations": {
"*.css": "tailwindcss"
}
setting.jsonは上記をそのまま追加すれば大丈夫です。
devcontainer.jsonは下記のように追加します。
devcontainer.json
{
"service": "nota-de-misterio-frontend",
"dockerComposeFile": "../docker-compose.yml",
"workspaceFolder": "/workdir",
"customizations": {
"vscode": {
"settings": {
"files.associations": {
"*.css": "tailwindcss"
}
}
}
}
}
Material Tailwindインストール
下記コマンドでインストール
npm install @material-tailwind/react
tailwind.config.jsを下記のように修正
tailwind.config.js
/** @type {import('tailwindcss').Config} */
+ const withMT = require('@material-tailwind/react/utils/withMT');
+ export default withMT({
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
+ });
以上で完了になります。