【TailwindCSS】tailwind.config.jsでカスタムスタイルを作成する方法【VSCode】

はじめに

VSCodeでCSSファイルに以下のようにカスタムスタイルを作成しても補完されません。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom)
  }
}

補完されるようにする方法

補完されるようにするにはCSSファイルではなく、プラグインシステムを使用してカスタムスタイルをプロジェクトに追加します。

tailwind.config.js

/** @type {import('tailwindcss').Config} */

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.pb-safe': {
          'padding-bottom': 'env(safe-area-inset-bottom)',
        },
      })
    }),
  ],
}

以下のように入力時に補完されるようになります。

参考