next.jsにtailwindcssを導入する

公開日時
更新日時

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

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

jsでクリップボードにコピーするボタンを実装する

Clipboard.writeText()を使う

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

AWS SESの受信メールを暗号化してs3に保存しLambdaで読み込む

jsの場合、複合処理を独自実装する必要がある

RaspberryPi ZeroにNode.jsの最新版をインストールする

vercel/install-nodeを使うと手軽にインストールできた