skip to content
barorin&?

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

/ 1 min read

next.js , tailwindcss

はじめに

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

方法

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

インストール

# 新しいプロジェクトを作成して、そのフォルダへ移動
$ 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 が使えるようになっているはずです。

$ npm run dev

おまけ