Trewindを反応させる-最速の方法!🚀

ハローフォークス👋
ここは救世主です.私は成功したWeb開発者として強化するつもりで若いdevです.私は、反応でウェブアプリを構築するのが好きです.フロントエンド技術の優位性を証明しました.
今日、私はあなたの反応アプリでTailwind CSSを設定する最も簡単で最速の方法をお見せします.だから、私と一緒に!何か驚くべきコード!

CSSをなぜ風にするか

Tailwindは、コンポーネントフレンドリーに設計されています.サイトの要素をより小さなコンポーネントに分離し、オブジェクトや外部のCSSクラスを使用してコードベースを汚染することはとても簡単です.さらに、すべてのクラスは、それがはるかに読みやすく理解できるようにコンポーネント内にインラインです.

プロジェクトを作成
まず第一に、反応プロジェクトを作成しましょう.ちょうど反応アプリを作成するには、以下のコマンドを使用します⚛️.

npx create-react-app your_react_project_name

セットアップ風のCSS
さて、我々はどのように我々は反応のアプリでセットアップ風風CSSを設定することができますチェックし、我々は作成しました.

パッケージのインストール
我々は、セットアップ風にいくつかのNPMパッケージが必要です.NPMパッケージです.

Postcss : JavaScriptを用いたCSS変換ツール

AutoPrefixer:CSSをパースするPostcssプラグインとCSSのプリフィックスをCSSのルールを使用して値を使用して追加します.

TailWindCSS:クラスを詰め込んだユーティリティの最初のCSSフレームワーク

それで、それらのすべてをインストールして、端末でコマンドをペーストしましょう⬇️.

npm install tailwindcss postcss autoprefixer postcss-cli -D

創造tailwind.cssNPMパッケージのインストール後、フォルダ名を作成しましょうstyles 内部src/ フォルダ.新規作成tailwind.css and output.css . のフォルダ構造src ⬇️

src/
├── styles/
         ├── output.css
         └── tailwind.css
├── app.js
└── index.js

そこで、次のコンテンツを貼り付けますtailwind.css .

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

リーブoutput.css 空.それはTarwindCSSによって世話されます.

設定ファイルの作成
では、設定ファイルを作成します.まず、デフォルトの設定ファイルを生成します.コードをペーストする⬇️ そして、あなたは行くのが良いでしょう!

npx tailwindcss init --full

このコマンドはtailwind.config.js すべてのデフォルト設定で.今、私たちは2つ以上のファイルを生成する必要があります.
クリエイトtailwindcss-config.js and postcss.config.js 次のコマンドを使用して設定ファイル.

npx tailwindcss init tailwindcss-config.js -p

今、ファイルに触れることはできません、我々は最後の部分にジャンプすることができます!

エディットpackage.jsonここでは、最後の部分が来る、それはとても簡単です、我々はちょうど新しいコマンドを追加する必要がありますwatch:css にpackage.json . 私は途中で、アプリを起動するたびに、それが自動的に呼び出さ取得した.だから、ここに行くscripts 一部package.json .

  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/output.css"
  },

今、我々がちょうど走るならばnpm start 我々は見ることができるoutput.css TailWindCSSのスタイルで満たされます.それは、すべてが絶対に正しいことを行った.🎉

CSSのテスト
今、テストする時間です.ために、スタイルの使用tailwind , 輸入しなければならないoutput.css 我々にapp.js .

import './styles/output.css'

はい、それです.我々は行くに良いです!若干の風変わりなスタイルを加えさせてください.

Feel free to use the following code to test your app.

import "./styles/output.css";

function App() {
  return (
    <div className="bg-gray-900 p-20 h-screen flex justify-center items-start flex-col">
      <h1 className="text-5xl text-white">Hello Tailwind 👋</h1>
      <p className="text-gray-400 mt-5 text-lg">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
        consequuntur odio aut nobis ab quis? Reiciendis doloremque ut quo fugiat
        eveniet tempora, atque alias earum ullam inventore itaque sapiente iste?
      </p>
      <button class="p-4 bg-green-600 rounded-lg font-bold text-white mt-5 hover:bg-gray-600">
        Hello Friends 🚀
      </button>
    </div>
  );
}

export default App;

だから、できますnpm start そして、それが働いているかどうかチェックしてください!

ハーレイ🎉 それは我々がブラウザで我々の見栄えのアプリを見ることができるです.我々は、ちょうどコードの少しの線でそれを作りました.以上です.私はそれが高速だった願っています!🚀
私はそれを展開している!だから、デモを持っている🚀 create-react-app-tailwind.vercel.app
私はスターターレポを作成してgithub - saviomartin/create-react-app-tailwind . あなたが本当にこれらのstuffsを避けるために望むならば、それは良い考えです、単にrepoをクローンして、アプリを起動してください.あなたは行くのが良いです!
スターリポジトリ!🌟 saviomartin/create-react-app-tailwind

👀 ラッピング
はい、それはラップです.あなたが記事を楽しんだ望み.あなたのフィードバックを共有することを躊躇しないでください.私はTwitterにいます.フォローをしろ
に関して私について来てください@saviomartin , 私の素晴らしいプロジェクトをお見逃しなく!💯
私はあなたがUnsplash APIを使用して、イメージ検索アプリケーションを作成し、今すぐ驚くべきアプリを構築を開始願っています.フィードバックは大いに評価されます!🙌
素晴らしい一日を!

🌎 レッツコネクト

Github

🙌 サポート
私のプロジェクトはコーヒーによって作られている☕, 私のために1つを得る!