Meteor で Tailwind CSS をインストール

Meteor プロジェクトでの Tailwind CSS のセットアップ。

まだセットアップしていない場合は、まず新しい Meteor プロジェクトを作成します。最も一般的なアプローチは、以下を使用することです。 Meteor CLI.

ターミナル

npx meteor create my-project
cd my-project

@tailwindcss/postcss とそのピア依存関係を npm 経由でインストールします。

ターミナル

npm install tailwindcss @tailwindcss/postcss postcss postcss-load-config

プロジェクトのルートに postcss.config.mjs ファイルを作成し、以下を追加します。 @tailwindcss/postcss プラグインを PostCSS 設定に追加します。

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Tailwind CSS の @import を ./client/main.css ファイルに追加します。

main.css

@import "tailwindcss";

npm run start でビルドプロセスを実行します。

ターミナル

npm run start

Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。

App.jsx

export const App = () => (
  <h1 className="text-3xl font-bold underline">
    Hello world!
  </h1>
)