【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'), // 追加
],
}
最近の記事
音楽生成AI「Suno」の使い方まとめ!作詞作曲が簡単にできる?
簡単に曲が作れるAIということでよく聞く「Suno(Chirp)」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ|GPT・DALL·E・Whisperなど
Open AIのAPI(一部)の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI(Upload file)で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。(Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12