Tailwind CSSモジュールの使用方法

モジュールの作成方法: Tailwind CSSモジュールを作成するには、まず新しいCSSファイルを作成します。例えば、"styles.css"という名前のファイルを作成しましょう。ファイル内で、必要なスタイルを定義します。

/* styles.css */
.btn {
  @apply px-4 py-2 rounded bg-blue-500 text-white;
}
.container {
  @apply mx-auto max-w-2xl p-4;
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

モジュールの使用方法: 作成したモジュールは、HTML内でクラスとして使用することができます。以下の例では、.btnクラスと.containerクラスを使用しています。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <button class="btn">Click me</button>
  <div class="container">
    <!-- コンテンツ -->
  </div>
</body>
</html>

以上が、Tailwind CSSモジュールの基本的な使用方法です。モジュールを作成し、インポートして、HTML内で使用することで、再利用可能なスタイルのセットを作成することができます。詳細なドキュメントや他の機能については、Tailwind CSS公式ウェブサイトを参照してください。