どのようにReactJCsを使用してTailWindCSSを使用する

この記事では、使用方法を学びますTailwindcss インReactjs . あなたが一歩一歩するとき、このプロセスは複雑でありません.
必要条件

ReactJSの基礎理解

TestWindCSSの基本的理解

ステップ1
端末またはCMDを開き、プロジェクトフォルダに移動し、次のコマンドを使用して反応アプリを作成します

npx create-react-app myapp 

それからmyapp コマンドを使用して端末cd myapp
ステップ2
TailWindCSSに必要な依存関係をインストールします.

 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss-cli autoprefixer@^9

ここではpostcss-cli , ToowindはCSSビルドプロセスを必要とし、ビルドプロセスを実行するためのステップを必要としますpostcss-cli . autoprefixer また、CSSのビルドプロセスも必要です.オプション-D すべての依存関係が開発依存であることを意味します.
ステップ3
プロジェクトフォルダを開きますmyapp お気に入りのコードエディタで.私はコードvs .VSコードのオープン端子次に、次のコマンドを入力して、プロジェクトの完全な設定ファイルを作成します.

npx tailwind init --full

このコマンドはtailwind.config.js ファイル.
ステップ4
としてファイルを作成するpostcss.config.js . このファイルでは、CSSビルドプロセスを指定します.

NOTE: Both tailwind.config.js and postcss.config.js must be located in the root of our project folder.

ステップ5
次の行をpostcss.config.js ファイル.

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
};                      

ステップ6
フォルダを作成するstyle srcフォルダ内にあります.次に、style フォルダは次のとおり.

tailwind.css

main.css

ステップ7
にtailwind.css ファイルの次のファイルを追加します.これらはプロジェクトで使用する基本的なパッケージです

@tailwind base;

@tailwind components;

@tailwind utilities;

tailwind.css is an input file and main.css is an output file.

手順8 :
開けるpackage.json ファイルを下に次のスクリプトを追加しますeject スクリプト.このスクリプトは、風風CSSを構築するために使用されます.

"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"

変更するstart and build 以下のスクリプト.

"start": "npm run build:css && react-scripts start"
"build": "npm run build:css && react-scripts build",

sample figure 1

ステップ9
我々は、最終的な手順でreactjsセットアップでTailWindCSSを完了するには!
これでインポートできますmain.css ファイルをApp.js ファイル.App.js 十分です.インポートする必要はありませんmain.css すべてのコンポーネントで.

import './styles/main.css';

最後の一歩.VSコードで端末を開き、次のコマンドを入力してビルドプロセスを開始します

npm run build:css

これで、コンポーネントにTailwindクラスを追加できます🥳🥳
あなたがアプリケーションサーバーとハッピーコーディングを反応開始!

npm start

sample figure 2

私はあなたと接続したいと思います.
私の次のブログ記事を見て、気をつけて!
参照:

Tailwindcss doc

React doc