【Next.js】Tailwindを導入する方法
2022/2/28
2023/1/6
Next.jsを利用している中で、Tailwindを導入してみました。
その過程をメモしていきます。
目次
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
指定した行数以降のテキストを「…(三点リーダー)」に変換するプラグインです。
$ 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/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Supabase + JavaScript】よく使う処理まとめ
最近、JavaScript(Next.js)とSupabaseでWEBサイトを作り始めました!
そこで今回は、JavaScriptでSupabaseを使う際のよく利用する処理をメモとして記載し...
2023/5/24
2023/5/24
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
AI画像生成「Stable Diffusion」をGoogle Colaboratoryで実行する方法メモ
目次1)Stable Diffusion WEB UIのGitHubを開く2)使いたいモデルを選ぶ3)Google Colaboratoryを実行する4)WEB UIのページを開く5)画像生...
2023/5/20
2023/5/20
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js 13】Googleタグマネージャの設定方法。
Next.js 13でGoogle Tag Managerを設定する方法を調べてみました。
とりあえずは動く処理ができたので、その方法をメモしておきます。
目次今回編集するファイルファイ...
2023/5/15
2023/5/15
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
Next.js 13のアプリ作成時に聞かれる質問まとめ
Next.js 13で新しいアプリケーションを作成する際、はじめにいくつかの質問に答えることが求められます。
この記事では、その質問の内容と解説をメモしていきます!また今回内容がわからなかった...
2023/5/6
2023/5/25
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js】DjangoのAPIで記事のタグを更新したい
DjangoのAPIを使って、Next.jsからデータを新規作成や更新する時に、同時に関連データ(ManyToMany)も変更したい。
今回は「記事(Post)」を新規作成/更新して、その記事...
2023/2/15
2023/2/15
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【GAS】複数スプレッドシートを一括CSVダウンロードする
複数のスプレッドシートをCSVファイルにしてダウンロードしたい時に、1シート毎にcsvダウンロードをしていくのが大変だったので、少し楽にできる方法を調べてみました。
今回は、そんな複数スプレッ...
2023/2/13
2023/2/13