どのようにTrewind CSSを設定するには

Cookwind CSSは、カスタムデザインを迅速に構築するためのユーティリティの最初のCSSフレームワークです.ブートストラップとマテリアルUIのような定義済みのコンポーネントを持つ代わりに、CSSヘルパークラスが付属し、これらのクラスでは、カスタムデザインを簡単に作成することができます.
私は少し側のプロジェクトに取り組んでいて、それがかなりのオーバーキルですが、風変わりなCSSを使うことに決めました.他のCSSフレームワークとは異なるいくつかの学習曲線がありますが、それはあなたがそれのハングアップを取得すると、まったく新しい開発経験を与える.

反応/ typescriptプロジェクトを加えてください

これはRetrix + TypeScriptプロジェクトになります.以下に示すこのアプローチでは、Trewindを使用するCRAを取り出す必要はありません.
まず、実行してプロジェクトを作成します.create-react-app react-ts-tailwind-example —typescriptthencd react-ts-tailwind-exampleルートディレクトリに入ったら、以下のようにして依存パッケージをインストールします.yarn add tailwindcss tailwindcss パッケージは、プロジェクトにテールウィンドを追加し、独自のCLIツールを有効にします.
次のステップは、実際にそれを使用できるようにプロジェクト内でTailwindを設定することです.そのためには、まず以下のコマンドを実行して設定ファイルを作成しましょう.npx tailwind init完了すると、生成すべきtailwind.config.js 以下のようになります.

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

これはプラグインとテーマの設定などを格納する場所ですが、今回はそれに触れません.
その後、作成する必要がありますsrc/tailwind.css ファイルを追加します.

/* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base

この行はTailwindの基本スタイルを注入することです.Cooklusは、Tarwindによって提供される若干の更なるスタイルを加えます.

@tailwind components

これはTailwindで見つかったプラグインによって登録されたコンポーネントクラスを注入します.設定.jsファイル.

@tailwind utilities

これは、tailwind cssによって提供されるすべてのユーティリティクラスを注入します.これらはまた、設定ファイルに基づいて生成されます.
CROAビルドシステムを使用しないでTarwindを使用するには、開始前にビルド風スクリプトを追加してスクリプトをビルドする必要があります.そのためには、オープンしましょうpackage.json スクリプトを更新します.

// package.json
"scripts": {
  "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
  "prestart": "npm run build:tailwind",
  "prebuild": "npm run build:tailwind",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

The build:tailwind スクリプトが見つかりますsrc/tailwind.css 以前に作成し、コンパイルして出力を保存しますsrc/tailwind.output.css . 以来prestart and prebuild , これらは既存の前に実行されますstart and build スクリプト出力ファイルを確実に生成するにはstart or build 起こる.
最後に、Tailwindをインポートすることができます.出力.上記のスクリプトで生成されたCSSファイルsrc/index.tsx ファイル:

// src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import './tailwind.output.css'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

この出力ファイルを.gitignore , さもなければ、あなたはREPOに大きなCSSファイルをコミットするでしょう!
現在、あなたのプロジェクトはTailwind CSSによって供給されますofficial docs また、いくつかのコンポーネントクラスで入力フィールドを追加し、実際に動作しているかどうかを確認します.

// src/App.js
import React from 'react'

const App: React.FC = () => {
  return (
    <div className="App">
      <input className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block appearance-none leading-normal m-10" type="email" placeholder="[email protected]">
    </div>
  )
}

export default App

ランyarn start このような入力をブラウザに表示する必要があります.

そこに行く!これは超簡単なセットアップであり、あなたの反応プロジェクトでそれを設定する方法にのみ触れました.Tailwindのチェックアウトのためにofficial site . うまくいけば、これは彼らの反応プロジェクトでTarwindを使うのを探している誰かを助けます.
読んでいただきありがとうございますし、共有してくださいだけで何を読んで好き!