skip to content
barorin&?

Next.jsでTailwind CSSを使うための準備

/ 1 min read

View more blogs with the tag next.js , View more blogs with the tag tailwindcss
Table of Contents

はじめに

Next.jsでTailwind CSSを使うための準備方法です。

方法

基本的には公式サイトの Installation に従えば OK です。
tailwindcss.com

インストール

Terminal window
# 新しいプロジェクトを作成して、そのフォルダへ移動
$ npx create-next-app my-project
$ cd my-project


# 関連するライブラリをインストール
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

コンフィグファイルの設定

/tailwind.config.js
# 以下の内容にします。
module.exports = {
  content: [
    "./pages/\*\*/\*.{js,ts,jsx,tsx}",
    "./components/\*\*/\*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}


# styles/globals.css
# 以下の内容にします。
@tailwind base;
@tailwind components;
@tailwind utilities;

起動

これで Tailwind CSS が使えるようになっているはずです。

Terminal window
$ npm run dev

おまけ