React Tailwind CSS

React プロジェクトで Tailwind CSS を使うのは非常に人気のある選択肢です。Tailwind CSS は CSS を記述するためのユーティリティファーストな手法を提供し、クラス名に直接スタイルを適用できるため、スタイルの記述がより簡潔で直感的になります。

Tailwind CSS チュートリアル：https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Tailwind CSS 公式サイト：https://tailwindcss.com/

Github アドレス：https://github.com/tailwindlabs/tailwindcss

Tailwind CSS は強力な CSS フレームワークであり、ユーティリティファーストの手法により、スタイルの記述をより簡潔かつモジュール化します。従来のクラスベースの CSS フレームワークとは異なり、Tailwind は低レベルのユーティリティクラス群を提供します。これらのクラスは HTML 要素で直接使用でき、カスタムデザインを迅速かつ柔軟に構築できます。

以下は、React プロジェクトで Tailwind CSS を使用するための詳細な手順です。

1. Tailwind CSS をインストールする

ゼロから新しい React プロジェクトを作成する場合、create-react-app を使用できます。既存の React プロジェクトがある場合は、プロジェクトの作成手順をスキップしてください。

新しい React プロジェクトを作成：

npx create-react-app my-app
cd my-project

Tailwind CSS をインストール

プロジェクトのディレクトリで以下のコマンドを実行して、Tailwind CSS と必要な依存関係をインストールします：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

これにより、tailwind.config.js ファイルと postcss.config.js ファイルが作成されます。

プロジェクトの構成は次のようになります：

my-app/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...（其他文件）
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── tailwind.config.js

2. Tailwind CSS を設定する

tailwind.config.js ファイルを編集して、未使用のスタイルを削除するように Tailwind を設定します。すべてのテンプレートファイルのパスを含めるように content 配列を更新します：

実例

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

3. Tailwind の基本スタイルを追加する

プロジェクトで src/index.css ファイルを開き、Tailwind の基本スタイル、コンポーネントスタイル、ユーティリティスタイルを含めるために次の内容を追加します：

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

4. Tailwind CSS を使ってスタイルを記述する

これで、React コンポーネント内で Tailwind CSS のクラス名を使ってスタイルを記述できるようになります。

App.js ファイルのコード：

import React from 'react';

const App = () => {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="bg-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl font-bold text-gray-900">Hello, サンプル!</h1>
<p className="mt-4 text-gray-600">初心者向けチュートリアル、学ぶのは技術だけではなく、夢でもあります！</p>
<button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
クリックして試す
</button>
</div>
</div>
);
};

export default App;

src/index.js ファイルが App コンポーネントを正しくインポートし、DOM にレンダリングしていることを確認してください。

src/index.js ファイルのコード：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

実行：

npm start

次に、ブラウザを開いて http://localhost:3000 にアクセスすると、Tailwind CSS のスタイルを使用したシンプルな React アプリが表示されるはずです。

上記の手順により、React プロジェクトに Tailwind CSS を正常に統合し、それを使ってスタイルを記述できました。Tailwind CSS のユーティリティクラス名を使用すると、コンポーネントにスタイルをすばやく追加でき、同時にスタイルコードの簡潔さとモジュール性を維持できます。

その他の拡張

React 実践プロジェクト