Next.jsにTailwindCSSをインストールしたい

この記事は最終更新日から1年以上が経過しています。

2021/12/01JavaScript

CSSは一切書かずにサイトを構築しようと思い、tailwind cssをインストールしてみることといたしました。

今回はこちらのリンク(https://tailwindcss.com/docs/guides/nextjs)を参考にチャレンジしました。

まずはインストールから

私はNext.jsのversion12なので以下のコマンドを叩きました。

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

次に、以下コマンドでtailwind.config.jsファイルとpostcss.config.jsファイルを生成します。

$ npx tailwindcss init -p

tailwind.config.jsファイルとpostcss.config.jsが作成されました。

次は、build時に未使用のtailwind.cssを除去(ツリーシェイク)するため、

tailwind.config.jsに追記します。

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], // 追記しました。
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

設定は以上になります。

ではNext.jsからtailwind cssを読み込みたいと思います。

pages/_app.jsのimport '../styles/globals.css'を

import 'tailwindcss/tailwind.css'に書き換えます。

// pages/_app.js

import 'tailwindcss/tailwind.css' // 書き換えました

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

globals.cssにtailwindをimportする方法でもOKですが、今回はノーcssでのサイト構築を目指していますので、<code class="inline-code">_app.js</code>にimportをする方法にいたしました。

ではサンプルコードをindex.jsxに仕込みます。

tailwindのclassを使ってボタンを仕込みました。

// ./pages/index.jsx

import Head from 'next/head'
import Image from 'next/image'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <button className="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-4">ring-4</button>
      </main>
    </div>
  )
}

では起動します。

$ npm run dev

お！

無事に上記のボタンが表示できました！

ノーcssでのサイト構築を目指して頑張ります。

お読みいただきありがとうございました！