next.jsにtailwindcssを導入する
next.jsアプリにCSSフレームワークのTailwind CSSを導入した際のメモ。
tailwindcssのインストールとpostcssの設定はnext.js公式のサンプルアプリを参考に実施。
tailwindcss導入後にVSCodeでcssファイルを開くと@tailwindがないと警告が出るのでstylelintを追加する。
yarn add -D stylelint-config-recommendedstylelint.config.js として↓を保存。
// eslint-disable-next-line no-undef
module.exports = {
extends: ['stylelint-config-recommended'],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['extends', 'tailwind'],
},
],
'block-no-empty': null,
'unit-whitelist': ['em', 'rem', 's'],
},
}.vscode/settings.json に↓を設定し、css.validateを無効にしてstylelintを有効にする。
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["html", "javascriptreact", "typescriptreact"],
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.enable": true,
"tailwindCSS.includeLanguages": {
"typescriptreact": "html"
}
}ついでにclass名の補完が効くようにTailwind CSS IntelliSense VSCode拡張も導入した。
最後に、eslint-plugin-tailwindを追加して、class名の表記順を自動整列するようにしておくと複数人で開発する際に便利。
これでnext.jsにtailwindcssが導入できた。