セットアップreactjs +タイアップスクリプトを使用して

このポストでは、reactjs(typescript)でTailwind CSSを設定する方法をあなたに教えます.
我々が作り出すものはこれです.
https://hopeful-rosalind-29803f.netlify.app/

1 .作成したReactJPプロジェクトを作成する

$ yarn create react-app react-tailwind-ts --template typescript

2 .風のかかるCSSをインストールする

$ yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

インストール

$ yarn add @craco/craco

ファイルの変更
この手順では、2つのファイルを編集します.package.json and craco.config.js (作成)package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
},

craco.config.js

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

5 .生成tailwind.config.jsこのステップでは、我々は生成されますtailwind.config.js 以下のコマンドと編集によってpurge .

$ yarn tailwindcss-cli@latest init

tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

6 .風を加えるindex.css

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

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(<App />, document.getElementById("root"));

reportWebVitals();

7 .コンポーネントを作成するGradient Text components/GradientText.tsx

type Props = {
  text: string;
};

export const GradientText = ({ text }: Props) => {
  return (
    <div className="p-10 min-h-screen flex items-center justify-center bg-cool-gray-700">
      <h1 className="text-9xl font-black text-white text-center">
        <span className="bg-gradient-to-r text-transparent bg-clip-text from-green-400 to-purple-500">
          {text}
        </span>
      </h1>
    </div>
  );
};

8 .アプリの実行

$ yarn start

すべてがうまくいくならば、あなたは以下のイメージを見ます.


レポ

koji / react_with_TailwindCSS
Trewind CSSによるReactJS
アプリケーションを作成する反応
このプロジェクトはブートしたCreate React App .
利用可能なスクリプト
プロジェクトディレクトリで実行できます.yarn start開発モードでアプリケーションを実行します.
オープンhttp://localhost:3000 ブラウザで表示するには.
あなたが編集をするならば、ページは再ロードされます.
コンソール内のlintエラーも表示されます.yarn testインタラクティブウォッチモードでテストランナーを起動します.
詳しくはrunning tests を参照してください.yarn build生産のためのアプリケーションをビルドしますbuild フォルダ.
それは正しく束が生産モードで反応し、最適なパフォーマンスのためのビルドを最適化します.
ビルドはミニ化され、ファイル名はハッシュを含みます.
あなたのアプリケーションを展開する準備が整いました!
詳しくはdeployment を参照してください.yarn eject注意:これは一方向操作です.一度eject , あなたは戻って行くことはできません!
あなたが満足しないならば..
View on GitHub