Sunday morning

next.jsにtailwindcssを導入する

公開日時
更新日時
#js#next.js

next.jsアプリにCSSフレームワークのTailwind CSSを導入した際のメモ。

tailwindcssのインストールとpostcssの設定はnext.js公式のサンプルアプリを参考に実施。

tailwindcss導入後にVSCodeでcssファイルを開くと@tailwindがないと警告が出るのでstylelintを追加する。

yarn add -D stylelint-config-recommended

stylelint.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が導入できた。

参考

Related #js

Yarnのキャッシュをクリアする

yarn cache clean

prismのモックサーバはexamples定義からレスポンスを返してくれる

仕様書を作る際はexamplesも定義するようにしておきたい