【Next.js】Tailwindを導入する方法

2022/2/28

2023/1/6

Next.jsを利用している中で、Tailwindを導入してみました。

その過程をメモしていきます。

Tailwind CSSをインストールする
「tailwind.config.js」を生成する
「tailwind.config.js」を編集する
「styles/global.css」を編集する
Tailwind導入完了。
Tailwindが反映されない場合の対処法
おまけ：よく使うプラグイン
- プラグイン⑴ @tailwindcss/line-clamp

Tailwind CSSをインストールする

$ npm i tailwindcss@latest postcss@latest autoprefixer@latest

「tailwind.config.js」を生成する

$ npx tailwindcss init -p

「tailwind.config.js」を編集する

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",       // 追加
        "./components/**/*.{js,ts,jsx,tsx}",  // 追加（componentsフォルダがある場合）
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

content内の./components/*/.{js,ts,jsx,tsx}の部分は「componentsフォルダ内」のファイルでもTailwind.cssが適用されるようにしています。

他にも適用したいフォルダがある場合には、このcomponentsの部分を変更したり追加したりしてみてください。

「styles/global.css」を編集する

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

元々記載されているCSSは削除かコメントアウトする。

Tailwind導入完了。

これでclassNameにTailwind.cssの記載をすれば反映されます。

Tailwindが反映されない場合の対処法

既にローカルサーバーで起動している場合は、すぐに反映されないことがあります。その場合は再度起動してみてください。

$ npm run dev

おまけ：よく使うプラグイン

プラグイン⑴ @tailwindcss/line-clamp

指定した行数以降のテキストを「…（三点リーダー）」に変換するプラグインです。

tailwindlabs/tailwindcss-line-clamp – GitHub

$ npm install @tailwindcss/line-clamp

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require('@tailwindcss/line-clamp'),  // 追加
    ],
}

Next.js

tailwindcss