Adding Tailwind CSS to React

  1. Install tailwind.
$ npm install tailwindcss --save-dev
  1. Create tailwind config file.
$ ./node_modules/.bin/tailwind init tailwind.js
  1. Create a source file for tailwind.
$ touch /src/css/tailwind.src.css
  1. Inject tailwind styles into the css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Update package.json with custom scripts.
"scripts": {
"tailwind:css":"tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css",
"start": "npm run tailwind:css && react-scripts start",
"build": "npm run tailwind:css && react-scripts build"
}
  1. Import the generated css file in your root file.
import "./css/tailwind.css";
Apr 26, 2019