Open6
Vite + Reactの環境にTailwind CSSとdaisyUIを入れる
masaoblueTailwindを入れる
とりあえず公式手順でtailwindを入れる
tailwindcss init する時に -p をつけ忘れるとpostcss.config.jsが生成されず、ちゃんとスタイルが適用されないため注意
VSCode拡張を入れる
class名を全暗記するのは大変なので補完されるようにする
masaoblueresetはどうするのかな？と思ったけど @tailwind base; でやってくれていそうだったので特になにもせず。便利な世の中だ
masaoblue手順に載っていたサンプルを適当な場所に配置
<h1 className="text-3xl font-bold underline">Hello world!</h1>
とりあえず下線が引かれているので適用はできていた
masaobluedaisyUIを入れる
ここに書かれている
tailwind.config.js
module.exports = {
plugins: [require("daisyui")],
}
という書き方で、vite起動時にdaisyUIのバージョンなどが表示されるようになったので、とりあえず読み込めてはいそう。
ただeslintに Viteだとrequireは使えないよ と怒られた。それはそう。
試しにimportで書いてみたら普通に動いたのでこれで良さそう。よかったね
tailwind.config.js
import daisyUI from "daisyui";
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [daisyUI],
};
masaoblueeslintルールも入れる
pnpm add -D eslint-plugin-tailwindcss
daisyUIのバージョン表示をなくす
eslint流す時とかにも表示されてすこし邪魔だったので以下で非表示にした
tailwind.config.js
export default {
...,
daisyui: {
logs: false,
},
};