グローバルスタイルの適用とTailwind CSSの使用方法について

まず、グローバルスタイルを適用する方法について説明します。一般的な方法は、CSSファイルを作成し、必要なスタイルを定義することです。このCSSファイルをHTMLファイルにリンクすることで、グローバルスタイルが適用されます。また、CSSプリプロセッサ（例えば、SassやLess）を使用することで、変数やミックスインを使って効率的なスタイル定義が可能です。

次に、Tailwind CSSの使用方法について説明します。Tailwind CSSは、HTMLクラスを使用してスタイルを定義します。例えば、<div class="bg-blue-500 text-white">Hello, World!</div>のように、クラスを使って背景色やテキストカラーを指定します。Tailwind CSSには、幅広いスタイルオプションが用意されており、グリッドシステムやフレックスボックスなどのレイアウトも簡単に実現できます。

さらに、Tailwind CSSでは、カスタムスタイルの定義も可能です。tailwind.config.jsファイルを編集し、テーマカラーやフォントなどのカスタマイズが行えます。また、プラグインを使用することで、さらに多機能なスタイリングが可能になります。

以下に、いくつかのコード例を示します。

グローバルスタイルの適用例:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  color: #333;
}
a {
  color: blue;
  text-decoration: none;
}
/* HTMLファイルでリンク */
<link rel="stylesheet" href="styles.css">

Tailwind CSSの使用例:

<div class="bg-blue-500 text-white p-4">
  Hello, World!
</div>

カスタムスタイルの定義例:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#ff0000',
      },
      fontFamily: {
        heading: ['Helvetica', 'Arial', 'sans-serif'],
      },
    },
  },
  variants: {},
  plugins: [],
};

以上が、グローバルスタイルの適用とTailwind CSSの使用方法についての解説です。これらの方法を活用することで、効率的で一貫性のあるスタイリングを実現できます。