nextjsとtailwindcssのインストールと設定 - フリーランス　技術調査ブログ

nuxtjsとtailwindcssのインストール

nuxtjsをインストール

npx create-next-app . --use-npm

tailwindcssだけインストールするとエラーが発生するため

npm i tailwindcss

(下記のエラーが発生する)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: postcss@8.1.7
npm ERR! node_modules/postcss
npm ERR!   postcss@"8.1.7" from next@10.0.7
npm ERR!   node_modules/next
npm ERR!     next@"10.0.7" from the root project
npm ERR!   peer postcss@"^8.0.9" from tailwindcss@2.0.3
npm ERR!   node_modules/tailwindcss
npm ERR!     tailwindcss@"*" from the root project
npm ERR!   2 more (autoprefixer, postcss-js)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.1.13" from postcss-nested@5.0.3
npm ERR! node_modules/tailwindcss/node_modules/postcss-nested
npm ERR!   postcss-nested@"^5.0.1" from tailwindcss@2.0.3
npm ERR!   node_modules/tailwindcss
npm ERR!     tailwindcss@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-02-24T13_36_04_489Z-debug.log

下記のように最新のバージョンをインストールするように指定することでインストールすることができました。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

(参考ページ) https://github.com/tailwindlabs/tailwindcss.com/issues/675

nuxtjsのtailwindcssの設定

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

構成ファイルの作成

次に、tailwind.config.jsファイルとpostcss.config.jsファイルを生成します。

npx tailwindcss init -p

tailwind.config.jsファイルのpurgeを指定を追加する

module.exports = {
  purge: ['./pages/**/*.{js}', './components/**/*.{js}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tailwindをインポートする

pages/_app.jsファイルにtailwindcssをインポートする

import '../styles/globals.css'
import "tailwindcss/tailwind.css";
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

CSSにTailwindを指定する

./styles/globals.cssファイルに下記の記述を追加する

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

pages/index.jsを下記のように修正してサーバーを起動する

import Head from 'next/head'

export default function Home() {
  return (
    <div className="min-h-screen py-0 px-2 flex flex-col justify-center items-center">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="w-72 y-64 bg-blue-400 text-center text-white">Hello Nextjs & tailwindcss</div>
    </div>      
  )
}

動作確認

nuxtjs上でtailwindcssが適用されていることを確認できる