Dev Blog

@shadcn/uiのcssが効かないと思ったらtailwindが効いていないだけだった

  1. そもそもtailwindが効いていれば@shadcn/uiが効くはずと調べる
  2. <h1 className="text-2xl font-bold text-red-500">あか</h1> とかやっても効かないことを確認
  3. クラスのstyleが適用されるかとかコンソールエラーとかいろいろ見て、以下の設定が足りないことを確認
import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/layouts/**/*.{js,ts,jsx,tsx}",
    "./src/app/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@shadcn/ui/components/**/*.{js,ts,jsx,tsx}",
  ],

＜メモ＞
そもそも何か？を考えれば、基礎的なことをやるだけで改善する。