Setup React and Tailwindcss in 60 second

Step One : Initialize react app using create-react-app and change to that directory

npx create-react-app hack-css && cd hack-css

Step Two: Run this command to install tailwindcss which comes with it own Cli,PostCss and autoprefixer

// Use this below if you prefer npm
npm install tailwindcss postcss autoprefixer -D
  //Or use this below if you prefer yarn
npm install tailwindcss postcss autoprefixer -D

Step Three: Create tailwind.config.js using this command

npx tailwindcss init

Step four : Open scr/index.css delete everything in it and paste this

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

Step 5 : replace this in the scripts tag in your package.json so it helps with compiling our styles

"scripts": {
  "build:tailwind": "tailwindcss build src/index.css -o src/index.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"
},

Step 6: Clear your App.js and paste this sample code I got from codepen in your App.js file.

function App() {
  return (
      <div className="max-w-sm rounded overflow-hidden shadow-lg mx-auto my-8">
          <img className="w-full" src="https://tailwindcss.com/img/card-top.jpg" alt="Sunset in the mountains" />
              <div className="px-6 py-4">
                  <div className="font-bold text-xl mb-2">The Coldest Sunset</div>
                  <p className="text-gray-600 text-base">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
                      perferendis eaque, exercitationem praesentium nihil.
                  </p>
              </div>
              <div className="px-6 py-4">
                  <span
                      className="inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-600 mr-2">#photography</span>
                  <span
                      className="inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-600 mr-2">#travel</span>
                  <span
                      className="inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-600">#winter</span>
              </div>
      </div>

)}
export default App;

Step 7: Finally go to index.js file and change index.css to index.output.css and then run yarn start or npm start.

Hurrah You have configured Tailwind with Create-react-App.In the part two of this post I will be explaining every step we took in details and why.

Here is the github repo

Thanks for reading.