😺

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

2022/12/18に公開約700字

【9Tailwind 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;

Discussion

ログインするとコメントできます