【Next.js】基礎から始めるNext.js API Routes【９Tailwind Setup】

【９Tailwind Setup】

YouTube: https://youtu.be/edO0CxuFvOc

https://youtu.be/edO0CxuFvOc

今回は「tailwind css」のセットアップを行います。

https://tailwindcss.com/docs/guides/nextjs

インストールコマンド
npm install -D tailwindcss postcss autoprefixer

tailwindの初期化
npx tailwindcss init -p

上記の初期化を行うと以下のファイルが作成されますので、
ドキュメントの内容をコピーして内容を差し替えます。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

最後に「styles」フォルダ内の「global.css」の内容を以下の通りに差し替えます。

styles/globals.css

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