# Next.js に Tailwind CSS を実装

これまで Bootstrap を使ってきましたが、最近流行している PostCSS ベースの Tailwind CSS を新規プロジェクトに導入してみました。

# Tailwind CSS のインストール

1. 必要なパッケージをインストール

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

これでtailwind.config.js postcss.config.js ファイルが初期化で作成されます。

2. tailwind.config.js 編集

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

以上！簡単ですね。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

# VSCode での Unknown at rule @tailwindcss エラーの解決

Next.js の globals.css に以下のように記述すると、VSCode で Unknown at rule の警告が表示されました。

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
}

これは、VSCode が Tailwind CSS のカスタムディレクティブを認識できないために発生します。この問題を解決するために、.vscode/settings.json ファイルを以下のように修正します。

{
  "css.validate": false,
  "scss.validate": false,
  "less.validate": false
}

解決！
これで VSCode が Tailwind CSS のカスタムディレクティブを認識し、警告が表示されなくなります。

# 参考

• Next.js Styling Tailwind CSS (opens new window)

• Tailwind CSS (opens new window)