TailWindCSS+React.md

1. npx create-react-app my-app
2. cd my-app
3. npm install tailwindcss --save-dev
4. Either tailwind init tailwind.config.js or ./node_modules/.bin/tailwind init tailwind.config.js
5. touch src/css/tailwind.src.css and paste it:

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

6. Scripts section in package.json:

"scripts": {
  "tailwind:css":"tailwind build src/css/tailwind.src.css -c  tailwind.config.js -o src/css/tailwind.css",
  "start": "npm run tailwind:css && react-scripts start",
  "build": "npm run tailwind:css && react-scripts build"
}

7. npm start
8. In src/index.js:

import './index.css';
import './css/tailwind.css';

9. Start working, for example in App.js:

<div className="text-center">
  <header className="bg-purple-darker m-6 p-6 rounded shadow-lg">
    <img src={logo} className="App-logo" alt="logo" />
    <h1 className="text-white text-3xl">Welcome to React</h1>
  </header>
  <p className="text-base">
    To get started, edit <code>src/App.js</code> and save to reload.
  </p>
</div>