Zenn
😥

tailwindcssが効かない時に試したこと

2023/12/31に公開
Next.js
Tailwind CSS
TypeScript
tech

next.jsでtailwindcssが反映されない😥

なぜか効かないので先ず最初にtailwind.config.tsを確認しました、

import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

ちゃんとcontentのパスは通っているので問題ないです

次にglobals.cssを確認

@tailwind base;
@tailwind components;
@tailwind utilities;

問題なしです

最後にlayout.tsxを確認

import type { Metadata } from "next";
　//ここが無かったimport "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

何とimport "./globals.css";を消してしまっていたとは、、、
うっかりミスで1時間も無駄にしました笑
二度と同じミスで時間を無駄にしないために戒めとして残しておきます

Discussion