Next.js - TailwindCSSの環境構築
1. Next.jsでTailwindCSSの環境構築
Next.js で TailwindCSS を使用するために、まずtailwindcss
、postcss
、autoprefixer
をインストールします。postcss-preset-env
など他の PostCSS プラグインを使用する場合は、公式ドキュメントのページが参考になります。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
postcss
- CSS ツールを作成するためのフレームワーク。
autoprefixer
- PostCSS 製のツール。ベンダープレフィックス(-moz-や-webkit-とか)を自動で付与してくれる。
インストールが完了したら、tailwind.config.js
とpostcss.config.js
というファイルを作成します。
touch tailwind.config.js
touch postcss.config.js
tailwind.config.js
には下記を記述します。
//tailwind.config.js
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
postcss.config.js
には下記を記述します。
//postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
global.cssなどに下記を記述。
/*global.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
_app.jsでglobal.cssを読み込みをすれば、TailwindCSSが使えるようになります。
//_app.js
import '../styles/globals.css'
Tailwind CSS with Next.js
Next.js + Tailwind CSS Example
2. VSCodeでTailwind CSSを使いやすくする
もしVSCodeを使用している場合、「Tailwind CSS IntelliSense」という拡張機能でオートコンプリートなどしてくれるのでTailwindCSSが書きやすくなります。
Tailwind CSS IntelliSenseの設定
ワークスペースのsettings.jsonに下記を記述してから、再起動するとオートコンプリートなどしてくれるようになります。機能しない場合は、Tailwindをインストールしていてtailwind.config.js
を作成しているか要確認。
{
"tailwindCSS.includeLanguages": {
"plaintext": "javascript" //使用する言語を設定(html、cssなど)
},
"tailwindCSS.emmetCompletions": true, //Emmetの補完を有効にする
"css.validate": false, //@applyなどTailwind固有の構文エラー回避
}
GitHub - Intelligent Tailwind CSS tooling for Visual Studio Code