🦄

Next.jsでTailwind CSSを爆速で試す！

2021/03/22に公開

JavaScript

Next.js

Tailwind CSS

tech

無駄な前置きなしで、早速create-next-appでNextアプリを作成しましょう。

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

ここで以下コマンドを実行し、Nextが起動するかを確認してみましょう。

$ npm run dev

npmでNextにtailwindcssをインストールします。

$ npm i tailwindcss
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init -p

エディタでtailwind.config.jsを開き、以下のように修正しましょう。

tailwind.config.js

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

pages/_app.jsにtailwind.cssをimportしましょう。

pages/_app.js

import '../styles/globals.css'
import 'tailwindcss/tailwind.css'

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

export default MyApp

styles/globals.cssを以下のように置き換えます。

styles/globals.css

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

pages/index.jsを以下のように置き換えます。<main>と<footer>は説明に不要なので削除しています。

pages/index.js

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>
        Hello Next.js
      </h1>
    </div>
  )
}

この状態でnpm run devを実行し、画面を見てみましょう。
このようになっていれば大丈夫です。

この画面には以下のスタイルが効いています。
このスタイルをtailwind.cssに置き換えていきたいと思います。

styles/Home.modules.css

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/*以下略*/

まず、styles/Home.modules.cssが効かないようにpages/index.jsを以下のように修正しましょう。
Home.module.cssのimportを削除し、className=""とし、空にしました。

pages/index.js

import Head from 'next/head'

export default function Home() {
  return (
    <div className="">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>
        Hello Next.js
      </h1>
    </div>
  )
}

この状態で、画面を確認すると以下の様になります。

では、ここからpages/index.jsから省いたstyles/Home.modules.css同等のスタイルをtailwind.cssで適用してみたいと思います。
書き方としては、classNameにtailwind.cssの記法をそのまま書くだけです。
今回利用した、min-h-screen py-0 px-2 flex flex-col justify-center items-centerの説明はこちらに詳しくのっています。

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>
      <h1>
        Hello Next.js
      </h1>
    </div>
  )
}

この状態で画面を確認すると、styles/Home.modules.cssを使ったときと同様なスタイルになりましたね！

以上、Next.jsでTailwind CSSを爆速で試す！でした。
これから使っていこうと思っている方にお役に立てれば幸いです。

Discussion